canvas绘制图片模糊,canvas放大失真

　　我们先来了解一下画布的这些宽度和高度。

　　Canvas.width是画布的大小，canvas.style.width是浏览器渲染的画布的大小。

　　第一个问题：画布的高度和宽度

　　画布的宽度和高度必须在画布标签中设定。如果是以css样式设置，就不行。画布将按照默认尺寸显示：宽度300像素，高度150像素。

　　//设置标签canvas ID= canvas width= 324 height= 622 中的宽度和高度。除了直接在画布标签中设置，还可以在绘图时设置。注意画布的宽度和高度不需要单位。

　　canvas.width=324canvas.height=622第二个问题：绘制的图形被放大，图像模糊

　　这是因为手机的设备无关像素和物理像素不一致，设备像素比=物理像素/设备无关像素。大部分手机的设备像素比为2，也就是说100px的图像只有放在200px才能正常显示。

　　使用devicePixelRatio，可以获得设备的像素比。得到像素比例后，我们就可以控制图形的缩放比例了。

　　scale=window . devicepixelrratio；刚才说了，canvas.style.width是浏览器渲染的画布大小。如果您希望您的绘图在画布中正确清晰地显示，您需要设置正确的style.width和style.height，如下所示。注意加单位。

　　canvas . style . width=canvas . width/scale px ；canvas . style . height=canvas.height/标度 px ；我们将画布的宽度设置为上面的324。如果不设置style.width，绘制的图形会放大2倍。

　　这篇关于放大模糊画布绘制的解决方法的文章到此为止。更多相关放大虚化画布图，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。