移动端Canvas出现锯齿和模糊

html-css014

移动端Canvas出现锯齿和模糊,第1张

在使用canvas绘图时，发现在移动端、ipad出现锯齿或模糊的情况，这是因为 设备像素比（Device pixel ratio） 的差异导致的。

解决方法：

1、将canvas的 属性： width/height 乘以 设备像素比；

2、canvas的css 样式 ：width/height不变；

3、canvas上下文ctx进行设备像素比缩放；

实例 向 div 元素添加圆角边框： div { border:2px solidborder-radius:25px} 亲自试一试 页面底部有更多实例。 浏览器支持 IE Firefox Chrome Safari Opera IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。 定...