js canvas 解决锯齿

最新推荐文章于 2024-08-12 15:32:51 发布

FullStack-KJ

最新推荐文章于 2024-08-12 15:32:51 发布

阅读量2.8k

点赞数 1

分类专栏： canvas JavaScript 文章标签： canvas

本文链接：https://blog.youkuaiyun.com/dashenid/article/details/103437412

版权

JavaScript 同时被 2 个专栏收录

6 篇文章

订阅专栏

canvas

1 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//解决锯齿
	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);
	}