我正在尝试使用html5 canvas和普通javascript创建一个简单的绘制/绘制程序.我的工作正常,但是当绘制和移动鼠标太快时,线路断开连接,我最终得到一条点线 – 我怎样才能使它成为一条平滑的连续线？
建议将不胜感激！我是JS的新手,所以代码示例非常有用,提前感谢.
目前的JS是：
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();
<canvas id="sketchpad" width="500" height="500"></canvas>
解决方法
您可以保存最后一个位置并在最后一个点和实际点之间画一条线.
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事件中,将两个变量设置为零.
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();
<canvas id="sketchpad" width="600" height="300"></canvas>
