js canvas 解决锯齿

最新推荐文章于 2024-07-29 10:42:08 发布

原创最新推荐文章于 2024-07-29 10:42:08 发布 · 2.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#canvas

JavaScript 同时被 2 个专栏收录

6 篇文章

订阅专栏

canvas

1 篇文章

订阅专栏

本文介绍了一种利用设备像素比调整canvas尺寸的方法，有效解决了在不同分辨率下canvas绘图出现的锯齿问题，通过缩放上下文，确保了在高分辨率屏幕上也能绘制出清晰平滑的图像。

//解决锯齿
	var width = canvas.width,height=canvas.height;
	if (window.devicePixelRatio) {
		devicePixelRatio = window.devicePixelRatio;
	    canvas.style.width = width + "px";
	    canvas.style.height = height + "px";
	    canvas.height = height * devicePixelRatio;
	    canvas.width = width * devicePixelRatio;
	    ctx.scale(devicePixelRatio, devicePixelRatio);
	}