python怎么画出圆润的曲线_canvas进阶——如何画出平滑的曲线?

let isDown = false;

let beginPoint = null;

const canvas = document.querySelector('#canvas');

const ctx = canvas.getContext('2d');

// 设置线条颜色

ctx.strokeStyle = 'red';

ctx.lineWidth = 1;

ctx.lineJoin = 'round';

ctx.lineCap = 'round';

canvas.addEventListener('mousedown', down, false);

canvas.addEventListener('mousemove', move, false);

canvas.addEventListener('mouseup', up, false);

canvas.addEventListener('mouseout', up, false);

function down(evt) {

isDown = true;

beginPoint = getPos(evt);

}

function move(evt) {

if (!isDown) return;

const endPoint = getPos(evt);

drawLine(beginPoint, endPoint);

beginPoint = endPoint;

}

function up(evt) {

if (!isDown) return;

const endPoint = getPos(evt);

drawLine(beginPoint, endPoint);

beginPoint = null;

isDown = false;

}

function getPos(evt) {

return {

x: evt.clientX,

y: evt.clientY

}

}

function drawLine(beginPoint, endPoint) {

ctx.beginPath();

ctx.moveTo(beginPoint.x, beginPoint.y);

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

ctx.stroke();

ctx.closePath();

}