-1

我有这个 html5 绘图应用程序，可以在画布元素上很好地绘制。我的问题是，我有一个橡皮擦的 img，我希望用户能够单击它，它会擦除​​画布。如果您还可以告诉我如何将笔画颜色更改为白色，则额外的业力点。

这是我的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 回答