我在body 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();
}
每次我移动鼠标时都应该清除画布,然后绘制一条新线,但它不能正常工作。我试图在不使用jQuery,鼠标监听器或类似工具的情况下解决它。
你应该使用“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();
}
请注意,ctx.clearRect()在Google Chrome上无法正常运行。我花了好几个小时试图解决一个相关的问题,只是在Chrome上找到它,而不是用rgba(0,0,0,0)填充矩形,它实际上用rgba(0,0,0,1)填充矩形代替!
因此,为了使矩形正确填充所需的透明黑色像素,您需要在Chrome上执行此操作:
ctx.fillStyle = "rgba(0, 0, 0, 0)";
ctx.fillRect(left, top, width, height);
当然,这应该适用于为HTML5 Canvas对象提供适当支持的所有浏览器。
尝试使用context.canvas.width = context.canvas.width
:
function lineDraw() {
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
//context.clearRect(0, 0, context.width,context.height);
context.canvas.width = context.canvas.width;
context.moveTo(0,0);
context.lineTo(event.clientX,event.clientY);
context.stroke();
}
但是z zxswい