我正在尝试使用html5 canvas和普通javascript创建一个简单的绘制/绘制程序.我的工作正常,但是当绘制和移动鼠标太快时,线路断开连接,我最终得到一条点线 – 我怎样才能使它成为一条平滑的连续线？
建议将不胜感激！我是JS的新手,所以代码示例非常有用,提前感谢.
目前的JS是：
@H_301_6@var canvas,ctx var mouseX,mouseY,mouseDown = 0 function draw(ctx,x,y,size) { ctx.fillStyle = "#000000" ctx.beginPath() ctx.arc(x,size,Math.PI*2,true) ctx.closePath() ctx.fill() } function clearCanvas(canvas,ctx) { ctx.clearRect(0,canvas.width,canvas.height) } function onMouseDown() { mouseDown = 1 draw(ctx,mouseX,2) } function onMouseUp() { mouseDown = 0 } function onMouseMove(e) { getMousePos(e) if (mouseDown == 1) { draw(ctx,2) } } function getMousePos(e) { if (!e) var e = event if (e.offsetX) { mouseX = e.offsetX mouseY = e.offsetY } else if (e.layerX) { mouseX = e.layerX mouseY = e.layerY } } function init() { canvas = document.getElementById('sketchpad') ctx = canvas.getContext('2d') canvas.addEventListener('mousedown',onMouseDown,false) canvas.addEventListener('mousemove',onMouseMove,false) window.addEventListener('mouseup',onMouseUp,false) } init(); @H_301_6@<canvas id="sketchpad" width="500" height="500"></canvas>解决方法
您可以保存最后一个位置并在最后一个点和实际点之间画一条线.
@H_301_6@if (lastX && lastY && (x !== lastX || y !== lastY)) {
ctx.fillStyle = "#000000";
ctx.lineWidth = 2 * size;
ctx.beginPath();
ctx.moveTo(lastX,lastY);
ctx.lineTo(x,y);
ctx.stroke();
// ...
lastX = x;
lastY = y;
}
在mouseup事件中,将两个变量设置为零.
@H_301_6@var canvas,mouseDown = 0,lastX,lastY; function draw(ctx,size) { if (lastX && lastY && (x !== lastX || y !== lastY)) { ctx.fillStyle = "#000000"; ctx.lineWidth = 2 * size; ctx.beginPath(); ctx.moveTo(lastX,lastY); ctx.lineTo(x,y); ctx.stroke(); } ctx.fillStyle = "#000000"; ctx.beginPath(); ctx.arc(x,true); ctx.closePath(); ctx.fill(); lastX = x; lastY = y; } function clearCanvas(canvas,2) } function onMouseUp() { mouseDown = 0; lastX = 0; lastY = 0; } function onMouseMove(e) { getMousePos(e) if (mouseDown == 1) { draw(ctx,false) } init(); @H_301_6@<canvas id="sketchpad" width="600" height="300"></canvas>