Question

我有这个html5绘图应用程序，它在canvas元素上绘制得很好。我的问题是，我有一个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);
    }

我想我需要一个重绘功能，但我真的不知道我在谈论这个问题。非常感谢任何见解！

Answer 1

假设您的背景颜色为白色，这是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);
}

Answer 2

您的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();
}

如何清除我的用户画布图？

2 个答案: