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

本文主要探讨了在使用HTML5 Canvas绘制饼图时遇到的锯齿问题,特别是在移动端表现明显。作者尝试了多种解决方案,包括通过translate方法微调坐标、使用window.devicePixelRatio调整canvas尺寸和比例。最终,通过适配不同设备的devicePixelRatio或设定默认4倍缩放,成功解决了锯齿问题,实现了平滑的圆形绘制。文章提供了详细的代码示例和效果对比。
摘要由CSDN通过智能技术生成

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

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

e3fe20bca8f70fd99e093dd5dd2cb38e.png

试试:结果如下

01adbb72fde64c93f6a35382535f1460.png

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

代码如下:

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

);

}

效果如下:

96cd6c4add9940a80292b9c13ccb2670.png

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值