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

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 06: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月4日
  • 已采纳回答 2月25日
  • 赞助了问题酬金5元 2月23日
  • 创建了问题 2月23日

悬赏问题

  • ¥15 vscode platformio
  • ¥15 代写uni代码,app唤醒
  • ¥15 全志t113i启动qt应用程序提示internal error
  • ¥15 ensp可以看看嘛.
  • ¥80 51单片机C语言代码解决单片机为AT89C52是清翔单片机
  • ¥60 优博讯DT50高通安卓11系统刷完机自动进去fastboot模式
  • ¥15 minist数字识别
  • ¥15 在安装gym库的pygame时遇到问题,不知道如何解决
  • ¥20 uniapp中的webview 使用的是本地的vue页面,在模拟器上显示无法打开
  • ¥15 网上下载的3DMAX模型,不显示贴图怎么办
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部