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

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画弧形锯齿问题算是完美解决了;