Li.charon 2022-02-23 10:07 采纳率: 100%
浏览 412
已结题

canvas绘图减少锯齿及消除路径空隙的方法

问题遇到的现象和发生背景

第一:quadraticCurveTo绘图产生空隙

img


使用了quadraticCurveTo方法去绘制画笔,但是鼠标移动速度慢的时候就会发生上图这样,产生空隙。
第二:quadraticCurveTo锯齿严重

img


当画笔宽度减少可以看见展示的锯齿效果挺严重的。请问应该如果消除

问题相关代码,请勿粘贴截图
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绘制,虽然无空隙的问题,但是锯齿更加严重

我想要达到的结果

无空隙,锯齿相对能圆滑些(不求完全消除)

  • 写回答

2条回答 默认 最新

  • ilmss 2022-02-23 14:18
    关注

    分辨率处理逻辑在
    https://github.com/doodlewind...
    以及
    https://github.com/doodlewind...
    这个chart.js的源码
    let width = canvas.width,height=canvas.height;
    if (window.devicePixelRatio) {
    canvas.style.width = width + "px";
    canvas.style.height = height + "px";
    canvas.height = height * window.devicePixelRatio;
    canvas.width = width * window.devicePixelRatio;
    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
    }
    来解决canvas锯齿问题。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 3月5日
  • 已采纳回答 2月25日
  • 赞助了问题酬金5元 2月23日
  • 创建了问题 2月23日

悬赏问题

  • ¥15 微信公众号如何开发网页
  • ¥15 h3.6m 人类行为预测论文复现
  • ¥50 wordpress项目注册报失败刷新后其实是成功状态,请求排查原因
  • ¥20 linxu服务器僵尸进程不释放,代码如何修改?
  • ¥15 pycharm激活不成功
  • ¥40 如果update 一个列名为参数的value
  • ¥15 基于51单片机的水位检测系统设计中LCD1602一直不显示
  • ¥15 OCS2安装出现问题,请大家给点意见
  • ¥15 ros小车启动launch文件报错
  • ¥15 vs2015到期想登陆但是登陆不上