-1

canvas要素にうまく描画するこのhtml5描画アプリがあります。私の問題は、消しゴムの画像があり、ユーザーがそれをクリックできるようにして、キャンバスを消去できるようにすることです。ストロークの色を白に変更する方法も教えていただければ、余分なカルマポイント.

これは私のhtmlです：

<div id="draw_area">

<canvas id="myCanvas" />
<p>browser sucks, here's links blah blah blah</p>
</canvas>
</div>

これを補完する JS は次のとおりです。

    var points = new Array();
var outlineImage = new Image();

function clearCanvas(){
 context.clearRect(0, 0, canvas.width, canvas.height);
}

if (window.addEventListener) {
    window.addEventListener('load', function () {
        var canvas, context, tool;

        function init() {
            // Find the canvas element.
            canvas = document.getElementById('imageView');
            if (!canvas) {
                alert('Error: I cannot find the canvas element!');
                return;
            }

            if (!canvas.getContext) {
                alert('Error: no canvas.getContext!');
                return;
            }

            // Size the canvas:
            canvas.width = 367;
            canvas.height= 249;

            // Get the 2D canvas context.
            context = canvas.getContext('2d');
            if (!context) {
                alert('Error: failed to getContext!');
                return;
            }

            // Pencil tool instance.
            tool = new tool_pencil();

            // Attach the mousedown, mousemove and mouseup event listeners.
            canvas.addEventListener('mousedown', ev_canvas, false);
            canvas.addEventListener('mousemove', ev_canvas, false);
            canvas.addEventListener('mouseup', ev_canvas, false);
        }




        // This painting tool works like a drawing pencil which tracks the mouse
        // movements.
        function tool_pencil() {
            var tool = this;
            this.started = false;

            // This is called when you start holding down the mouse button.
            // This starts the pencil drawing.
            this.mousedown = function (ev) {
                context.beginPath();
                context.moveTo(ev._x, ev._y);
                tool.started = true;
            };

            // This function is called every time you move the mouse. Obviously, it only
            // draws if the tool.started state is set to true (when you are holding down
            // the mouse button).
            this.mousemove = function (ev) {
                if (tool.started) {
                    context.lineTo(ev._x, ev._y);
                    context.stroke();
                }
            };

            // This is called when you release the mouse button.
            this.mouseup = function (ev) {
                if (tool.started) {
                    tool.mousemove(ev);
                    tool.started = false;
                }
            };
        }
        // The general-purpose event handler. This function just determines the mouse
        // position relative to the canvas element.
        function ev_canvas(ev) {
            if (navigator.appName == 'Microsoft Internet Explorer' || navigator.vendor == 'Google Inc.' || navigator.vendor == 'Apple Computer, Inc.') { // IE or Chrome
                ev._x = ev.offsetX;
                ev._y = ev.offsetY;
            } else if (ev.layerX || ev.layerX == 0) { // Firefox
                ev._x = ev.layerX - this.offsetLeft;
                ev._y = ev.layerY - this.offsetTop;
            } else if (ev.offsetX || ev.offsetX == 0) { // Opera
                ev._x = ev.offsetX;
                ev._y = ev.offsetY;
            }
            // Call the event handler of the tool.
            var func = tool[ev.type];
            if (func) {
                func(ev);
            }
            points.push(ev);
        }

        init();

    }, false);
    }

再描画機能が必要だと思いますが、この問題に関して何を話しているのかよくわかりません。どんな洞察も大歓迎です！

4

2 に答える 2

0

背景色が白であると仮定すると、これは clearRect が提供するものであり、ユーザーが消しゴムを選択したときにストロークの色を白に変更するだけです。これは簡単に行うことができます

context.strokeStyle = 'white';

色の変更の詳細については、 http://www.w3.org/TR/2dcontext/#fill-and-stroke-stylesを参照してください。

mousedown消しゴム画像がキャンバスに描画されている場合、またはmouseupイベント ハンドラーでそのクリックを検出する必要があります。キャンバスの外にある場合は、クリックonclickされたときに設定する関数を追加するだけです。strokeStyleただし、消しゴムですべてを消去したい場合は、

function clearCanvas(){
  context.clearRect(0, 0, context.canvas.width, context.canvas.height);
}
于 2012-04-05T19:13:11.880 に答える
0

が呼び出されるcanvasスコープで変数を使用できませんでした。clearCanvasこれを修正する方法は他にもありますが、単純に次のようにします。

function clearContext( ctx ){
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

呼び出し時にコンテキストを関数に渡します。

ただし、コンテキストが何らかの方法で変換された場合、上記は可視領域全体をクリアしないことに注意してください。これを防ぐために、次のことが必要になる場合があります。

function clearContext( ctx ){
  ctx.save();
  ctx.setTransform(1,0,0,1,0,0);
  ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
  ctx.restore();
}
于 2012-04-05T19:17:23.723 に答える