html5之canvas画布尺寸与显示尺寸

2016-05-08· 7006 次浏览
很多人在初学Html5的canvas时都会遇到一个问题, ![](https://image.xsoftlab.net/baike/articleImages/b3d82d9115c74594aff6ff1bf2936d66.jpg) css改变了canvas的尺寸后,本来是可以画出一个圆来,现在却是一个扁平的圆, 原因分析: canvas相当于一张图片,它自身有个尺寸,是内容的尺寸,默认大小为:300px\*150px,当我们使用css设置这个canvas大小为800px\*600px时,看起来画布变成了800x600,其实它本身的内容还是300x150,也就是此时的内容将会被拉伸,这就是图像变形的原因。 解决方案: ``` 使用元素属性来改变: <canvas width=500 height=400></canvas> 对应的javascript是: canvas=document.getElementsByTagName('canvas')[0]; canvas.width=500; canvas.height=400; ```