优雅的解决canvas画圆锯齿问题

Posted 2021-04-29 前端小砖头

canvas

解决canvas画圆锯齿问题

之前做一各项目需要画一个饼图,于是使用html5的canvas元素画出来的.一看在移动端手机上测试都发现画图有一点锯齿明显问题,

1

效果如下

代码如下

 var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 ctx.beginPath();;
 ctx.lineWidth = 40;
 ctx.arc(75,75,50,0,Math.PI * 2);
 ctx.strokeStyle = '#0066FF';
 ctx.stroke();

2

这样子当然不行,多方查找原因,有如下说法

试试:结果如下

几乎没变化,反正我是看不出来,除了想右偏移了点点

代码如下:

 var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 ctx.beginPath();;
 ctx.translate(0.5, 0.5);
 ctx.lineWidth = 40;
 ctx.arc(75,75,50,0,Math.PI * 2);
 ctx.strokeStyle = '#0066FF';
 ctx.stroke();

3

还是不能满足,于是便去瞅瞅chart.js的源码,找到如下方案

var 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
    );
}

效果如下:

使用window.devicePixelRatio设备上物理像素和设备独立像素(device-independent pixels (dips))的比例(就是我们常说的几倍屏)来设置canvas实际需要放大的倍数，原理与上一种方法一样，区别在于　devicePixelRatio取出的是实际的比例倍数，在pc端显示为1，避免了上种方法PC端不判断同样放大一样倍数画图出现明显锯齿问题，但是devicePixelRatio各个浏览器的兼容性不是很好所以咱们做下兼容,完善一下,

4

效果如下

当不兼容devicePixelRatio的时候咱们就默认设置为4倍缩放目前已知的最大的缩放比就是4倍屏

代码如下

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = canvas.width,height=canvas.height;
window.devicePixelRatio?
                        setScale(window.devicePixelRatio):
                        setScale(4);
function setScale(d){
    canvas.style.width = width + "px";
    canvas.style.height = height + "px";
    canvas.height = height * d;
    canvas.width = width * d;
    ctx.scale( d , d );
}
ctx.beginPath();
ctx.translate(0.5, 0.5);
ctx.lineWidth = 40;
ctx.arc(75,75,50,0,Math.PI * 2);
ctx.strokeStyle = '#0066FF';
ctx.stroke();

到目前关于canvas画弧形锯齿问题算是完美解决了;