首页 > 建站教程 > html教程 >  HTML5 Canvas画出来的图像变形正文

HTML5 Canvas画出来的图像变形

因为平时很少用HTML5 Canvas画图。今天,在画图时,我爱模板网才发现,HTML5 Canvas画出来的圆,不是圆,是椭圆,正方形,也变成了长方形,而且不清楚,代码片段如下:
<style>
canvas{width:300px; height:300px; border:2px solid red;}
</style>
<canvas id="draw"></canvas>
<script>
var c = document.getElementById("draw");
var ctx = c.getContext("2d");
//画150*150的正方形
ctx.fillRect(10,10,150,150);
</script>
最后得到的效果如下:


我就奇怪了,明明画的是正方形,怎么出来了是长方形?难道被压缩了。然后,我把代码改了,将 canvas 的style样式定义的宽高,用它的html属性的宽高来定义,如下:
<style>
canvas{ border:2px solid red;}
</style>
<!--将宽高定义在了这里,不放在style里面-->
<canvas id="draw" width=300 height=300px></canvas>
<script>
var c = document.getElementById("draw");
var ctx = c.getContext("2d");
//画150*150的正方形
ctx.fillRect(10,10,150,150);
</script>
运行后,正常了:


百度了下,发现是这么说的:
      当你在支持html5 canvas的浏览器下查看页面的时候,你会看到一个大小为300px*300px(BTW:canvas默认大小为:300px*150pxcanvas)相当于一张图片,css设置的属性相当于对这张图片进行拉伸变化。

      要改变canvas的大小,应当用这种方式:

     使用js来改变
<canvas width=500 height=400></canvas>
     对应的javascript是
canvas=document.getElementsByTagName('canvas')[0];
canvas.width=500;
canvas.height=400;
     换句话说,你现在画出的圆实际显示的是在默认大小上经过拉伸变换的样子。

以后,定义画布大小,还是用html属性来定义。