html画一条短线,如何使用html canvas和javascript绘制一条平滑的连续线

您可以保存最后一个位置并在最后一个点和实际点之间画一条线.

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, ctx

var mouseX, mouseY, mouseDown = 0,

lastX, lastY;

function draw(ctx,x,y,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, y, size, 0, Math.PI*2, true);

ctx.closePath();

ctx.fill();

lastX = x;

lastY = y;

}

function clearCanvas(canvas,ctx) {

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

}

function onMouseDown() {

mouseDown = 1

draw(ctx, mouseX, mouseY, 2)

}

function onMouseUp() {

mouseDown = 0;

lastX = 0;

lastY = 0;

}

function onMouseMove(e) {

getMousePos(e)

if (mouseDown == 1) {

draw(ctx, mouseX, mouseY, 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();