用canvas绘图时,绘制的图形出现了明显锯齿
正常预览图片
用drawImage绘制在canvas上的图片
出现原因
图片都是通过像素组成的,一般的1px就是1像素,但是不同屏幕, css像素和物理像素并不是1:1的关系
通过 window.devicePixelRatio 查看,因为渲染比不同,导致图像在屏幕上的输出也不同,就是1像素并不是1px,导致图片模糊的问题
解决方案
先将canvas放大 window.devicePixelRatio 倍,渲染图片canvas就和屏幕的像素比就是1:1了,再通过css将放大的canvas缩放回原来的大小
参考文章《记一次高分屏下canvas模糊问题》
代码实现
// 获取设备像素比
const getPixelRatio = context => {
// backingStore 获取浏览器像素和真实像素比
// 这个属性大部分浏览器都已废弃
const backingStore =
context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio ||
1;
return (window.devicePixelRatio || 1) / backingStore;
};
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
const ratio = getPixelRatio(ctx);
canvas.width = canvas.width * ratio;
canvas.height = canvas.height * ratio;
canvas.style.width = canvas.width + 'px';
canvas.style.height = canvas.height + 'px';
const img = new Image()
img.onload = function () {
ctx.drawImage(img, 0, 0, 500, 500);
}
img.src = './static/canvas.png';
参考文章
《Window.devicePixelRatio》
《High DPI Canvas 高分辨率Canvas(译)》
hidpi-canvas-polyfill
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。