问题遇到的现象和发生背景
第一:quadraticCurveTo绘图产生空隙
使用了quadraticCurveTo方法去绘制画笔,但是鼠标移动速度慢的时候就会发生上图这样,产生空隙。
第二:quadraticCurveTo锯齿严重
当画笔宽度减少可以看见展示的锯齿效果挺严重的。请问应该如果消除
问题相关代码,请勿粘贴截图
let points=[];
let beginPoint =null;
//鼠标点击
canvas.mousedown(function (ev) {
ev = ev || window.event;
const { x, y } = _this.getPos(ev);
points.push({ x, y });
beginPoint = { x, y }
_this.bool = true;
})
//鼠标移动
canvas.mousemove(function (ev) {
if (!_this.bool) {
return
}
const { x, y } = _this.getPos(ev);
points.push({ x, y });
if (points.length > 3) {
const lastTwoPoints =points.slice(-2);
const controlPoint = lastTwoPoints[0];
const endPoint = { x: (lastTwoPoints[0].x + lastTwoPoints[1].x) / 2, y: (lastTwoPoints[0].y + lastTwoPoints[1].y) / 2 }
_this.drawLine(beginPoint, controlPoint, endPoint);
beginPoint = endPoint;
}
//鼠标松开
canvas.mouseup(function (ev) {
const { x, y } = _this.getPos(ev);
points.push({ x, y });
if (points.length > 3) {
const lastTwoPoints = points.slice(-2);
const controlPoint = lastTwoPoints[0];
const endPoint = lastTwoPoints[1];
_this.drawLine(beginPoint, controlPoint, endPoint);
}
_this.bool = false;
points = [];
})
//画图函数
drawLine: function (beginPoint, controlPoint, endPoint) {
let _this = this;
_this.ctx.beginPath();
_this.ctx.moveTo(beginPoint.x, beginPoint.y);
_this.ctx.quadraticCurveTo(controlPoint.x, controlPoint.y, endPoint.x, endPoint.y);
_this.ctx.stroke();
_this.ctx.closePath();
},
运行结果及报错内容
我的解答思路和尝试过的方法
使用过lineto绘制,虽然无空隙的问题,但是锯齿更加严重
我想要达到的结果
无空隙,锯齿相对能圆滑些(不求完全消除)