canvas中的点用贝斯曲线连接成光滑曲线（解决移动端画布模糊问题）

原创

于 2018-03-07 21:49:48 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#贝斯曲线

解决移动端画布模糊问题，通过放大canvas四倍并使用贝塞尔曲线将折线图变得平滑。首先，调整canvas行内样式宽高为原来四倍，然后确保内容也放大相同比例，最后设置canvas宽度为100%以保持清晰度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决移动端画布模糊问题

第一步：将画布放大四倍，设置行内样式的宽高为原来的四倍即可
第二步：画布里面的内容也放大四倍
第三步：将画布宽高100%，压缩后变清晰

移动端用rem，放大四倍有困难，这里用js可以改变canvas的宽高

            //设置canvas大小
            var canvasSize = document.getElementById('chart')
            canvasSize.width = $('.canvasHeight').width() * 4
            canvasSize.height = $('.canvasHeight').height() * 4

将折线图变为贝斯曲线的方法

最低0.47元/天解锁文章

200万优质内容无限畅学