html5 画布按钮,HTML5干净的画布与按钮

我有这个JavaScript代码，当我点击按钮，画布清理。HTML5干净的画布与按钮

但是，当我移动鼠标，在画布上显示我什么我以前写的，它不以空白画布开始

我能做些什么来开始一个空白的画布后，我按一下按钮？

谢谢。

Your browser does not support the HTML5 canvas tag.

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

function getMousePos(canvas, evt) {

var rect = canvas.getBoundingClientRect();

return {

x: evt.clientX - rect.left,

y: evt.clientY - rect.top

};

}

canvas.addEventListener('mousemove',

function(evt){

var mousePos = getMousePos(canvas, evt);

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.strokeStyle = 'red';

ctx.lineTo(mousePos.x,mousePos.y);

ctx.stroke();

}

);

document.getElementById('clear').addEventListener('click', function(){

ctx.clearRect(0, 0, canvas.width, canvas.height);

}, false);

function erase(){

ctx.clearRect(0, 0, canvas.width, canvas.height);

}

2017-03-12

andrea

+1

在** **开发工具控制台任何错误？即关于'context'是未定义的？ –

+0

是的：D分心......我注意到并纠正了我的问题。谢谢:)但现在我有另一个问题了：当我移动鼠标时，画布显示我之前写过的内容，而不是以空白画布开始。我怎么做才能开始与空白画布后，我点击按钮？ –