以前用画布画图时，都是直接在画布标签里直接写上宽高，没有问题，但也没有探究过为什么宽高要直接写在画布标签里，因为各个资料的例子上都是这么写的。今天王sir提出了一个问题：如果把宽高写在<style>里，看看会有什么不同。自己试了以下，果然有问题。
先看一下代码：
复制代码
代码如下：
<！DOCTYPEhtml><html><head><metacharset=“utf-8”><title>画布</title><metaname=“关键字”content=“”><metaname=“author”content=“@my_programmer”><styletype=“text/css”>body{margin：0;}canvas{margin：20px;/*宽度：400像素；高度：300px；*/}</style></head><bodyonload=“draw（）”><canvasid=“canvas”width=400height=300style=“border：1pxsolid＃f00;”></canvas><script>函数draw（）{varcanvas=document.getElementById（'canvas'）;varcontext=canvas.getContext（'2d'）;context.beginPath（）;
context.moveTo（20,20）;context.lineTo（200,100）;context.lineWidth=5;context.stroke（）;}</script></body></html>
1.宽：400；高：300；直接写在<canvas>里的效果：
2，删除<canvas>里的宽高，宽：400；高：300；写在<style>里的效果：
为什么两者的效果会不一样呢？
canvas跟其他标签一样，也可以通过css来定义样式。但这里需要注意的是：canvas的重置宽高为300px*150px，在css中为canvas定义宽高，实际上把宽高为300px*150px的画布进行了拉伸，如果在这样的情况下进行画布绘图，你得到的图形可能就是变形的效果。所以，在画布绘图时，应该在画布标签里直接定义宽高。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h60944.shtml
