Question

我已经实现了在画布上绘制的所有功能，如drawFree，Line，Triangle，Star但是当我选择其他工具时，它也会绘制前面的图例：如果我先选择了drawFree，那么它工作正常，当我选择绘制直线工具绘制直线时，它也调用前一个函数。

的javascript

var fs = require('fs')
var filedir = process.argv[2]

function doneReading(err, fileContents) {
    var lines = fileContents.split("\n")
    console.log(lines.length-1)
}
function countLines(filedir) {
    fs.readFile(filedir, "utf8", doneReading)
}
countLines(filedir)

CSS

    canvas.removeEventListener('mousedown',draw_Line);
                                    canvas.removeEventListener('mouseup',stop_Draw_Line);
                                    canvas.removeEventListener('mousemove',draw_Dragging_Line);
                                    canvas.removeEventListener('mousedown',draw_Free);
                                    canvas.removeEventListener('mouseup',stop_Draw);
                                    canvas.removeEventListener('mousemove',draw_Dragging);
                                    canvas.removeEventListener('mousedown',draw_Eraser);
                                    canvas.removeEventListener('mousemove',draw_Eraser_Dragging);
                                    canvas.removeEventListener('mouseup',stop_Eraser);
                switch(str)
                {
                    case "DrawFree":
                                    toolselect=1;
                                    canvas.addEventListener('mousedown',draw_Free);
                                    canvas.addEventListener('mouseup',stop_Draw);
                                    canvas.addEventListener('mousemove',draw_Dragging);
                                    break;
                    case "Line":    toolselect=2;
                                    canvas.addEventListener('mousedown',draw_Line);
                                    canvas.addEventListener('mouseup',stop_Draw_Line);
                                    canvas.addEventListener('mousemove',draw_Dragging_Line);
                                    break;

                    case "Circle":  toolselect=3;
                                    canvas.addEventListener('mousedown',draw_Line);
                                    canvas.addEventListener('mouseup',stop_Draw_Line);
                                    canvas.addEventListener('mousemove',draw_Dragging_Line);
                                    break;

如何从画布中一次删除所有事件？有人可以帮忙吗？

Answer 1

在脚本的开头，您需要将画布上下文保存到变量：

var context = canvas.getContext('2d');

然后，您需要在绘制新图之前按context.beginPath();重置当前路径。

在W3Schools上查看。

HTML5 Canvas绘图应用程序问题

1 个答案: