Canvas绘制线条时断断续续的

解决线条断断续续的关键代码如下：

我们可以使用quadraticCurveTo来实现贝塞尔曲线使其变成光滑的曲线

注意： ctx.value.lineCap = "round";
            ctx.value.lineJoin = "round";     这两个属性是必须设置的

           

lastX，lastY：贝塞尔曲线的起始点；

controlPoint：贝塞尔曲线的控制点；

endPoint：贝塞尔曲线的结束点；

// 绘制贝塞尔曲线让线段看起来更加平滑
const drawLine = (controlPoint: { x: number; y: number }, endPoint: { x: number; y: number }) => {
	if (!isDrawing || !ctx.value || !canvas.value) return;
	ctx.value.beginPath();
	if (mode == "draw") {
		// 如果是绘制
		ctx.value.globalCompositeOperation = "source-over";
		ctx.value.lineWidth = 10;
	} else {
		// 如果是橡皮擦
		ctx.value.globalCompositeOperation = "destination-out";
		ctx.value.lineWidth = clearRadius * 2;
	}
	ctx.value.moveTo(lastX, lastY);
	ctx.value.strokeStyle = props.color ?? "#ffffff";
	ctx.value.lineCap = "round";
	ctx.value.lineJoin = "round";
	ctx.value.quadraticCurveTo(controlPoint.x, controlPoint.y, endPoint.x, endPoint.y);
	ctx.value.stroke();
	ctx.value.closePath();
};

        在这段代码中我们设置了ctx.value.globalCompositeOperation = "destination-out";来使我们实现橡皮擦的效果，这个属性的意思是在源图像(您打算放置到画布上的绘图)外显示目标图像(您已经放置在画布上的绘图)，只有源图像(您打算放置到画布上的绘图)外的目标图像(您已经放置在画布上的绘图)部分会被显示，源图像(您打算放置到画布上的绘图)是透明的。

 globalCompositeOperation的定义和用法

globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。其中：

• 源图像 = 您打算放置到画布上的绘图。
• 目标图像 = 您已经放置在画布上的绘图

下图显示了globalCompositeOperation的不同的值的解释：