javascript - clearRect函数不会清除 Canvas

原文 标签 javascript line draw onmousemove

我在主体onmousemove函数上使用此脚本:

function lineDraw() {
    // Get the context and the canvas:
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    // Clear the last canvas
    context.clearRect(0, 0, canvas.width, canvas.height);
    // Draw the line:
    context.moveTo(0, 0);
    context.lineTo(event.clientX, event.clientY);
    context.stroke();
}

每次我移动鼠标并画一条新线时都应该清除 Canvas ,但是它不能正常工作。
我正在尝试不使用jQuery,鼠标监听器或类似工具来解决它。

这是一个演示:https://jsfiddle.net/0y4wf31k/

最佳答案

您应该使用“ beginPath()”。这就对了。

function lineDraw() {   
    var canvas=document.getElementById("myCanvas");
    var context=canvas.getContext("2d");
    context.clearRect(0, 0, context.width,context.height);
    context.beginPath();//ADD THIS LINE!<<<<<<<<<<<<<
    context.moveTo(0,0);
    context.lineTo(event.clientX,event.clientY);
    context.stroke();
}

相关文章:

javascript - 页面特定部分的网址

svg - NVD3折线图,带垂直线

java - Java,创建和编辑面板的图形对象吗?

javascript - NodeJS/mySQL-ER_ACCESS_DENIED_ERROR拒绝用户 'root' @'localhost'的访问(使用密码: YES)

javascript - 动态Twitter分享按钮

c - C-用户输入导致程序崩溃

c++ - 具有SFML,1.6到2.x转换的动态照明程序

android - Android通过X Y Positions在 Canvas 上绘制位图和按钮

android - 绘制的笔触矩形中的线宽不均匀

javascript - 在数组中推送对象仅返回最后推送的对象