[ H5 | canvas ] 图像变形和模糊问题

图像变形:

当你在支持html5 canvas的浏览器下查看页面的时候,canvas画布的默认大小是300*150,当在css设置画布大小时比如300*300实际是将原画布(300*150)进行了拉伸,所以会导致图像变形

解决方法:将想要设置的画布大小直接设置在canvas标签上

图像模糊:

解决方法:绘制时,以多倍的大小去布局(根据项目需求),然后将canvas的父元素缩小同样倍数(根据绘制过程中放大的倍数确定了,当打几倍父元素就缩小几倍)就可以解决canvas图像模糊问题。

# 这个例子最终显示的大小还是300*300



#canvas{zoom:0.5;}

 

你可能感兴趣的:(笔记)