HTML5 Canvas通过CSS与元素属性的大小
我不明白为什么下面的代码片段会产生不同的结果，因为css会在放大时缩放canvas，
<style> #canvas { width: 800px; height: 600px; } </style> <canvas id="canvas"></canvas> 与这种方法相反（按预期工作）：
<canvas id="canvas" width="800px" height="600px"></canvas>
解释是在这里： http : //www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width在另一篇文章中看到，谢谢！
canvas元素的固有尺寸等于坐标空间的大小，数字解释为CSS像素。 但是，元素可以通过样式表任意resize。 在渲染过程中，图像被缩放以适应这种布局大小 。
想一下如果你有一个32×32的JPG（它总共有1024个像素）会发生什么情况，但是通过CSS指定它应该显示为width:800px; height:16px width:800px; height:16px 。 同样的事情适用于HTMLcanvas：
-
canvas元素的
width和height属性决定了你可以绘制多less个像素。 如果您不指定canvas元素的高度和宽度，则根据规范 ：
“宽度属性默认为300，高度属性默认为150”。 -
CSS属性的
width和height控制元素在屏幕上显示的大小。 如果未设置CSS尺寸，则使用元素的固有尺寸进行布局。
如果您在CSS中指定与canvas的实际尺寸不同的尺寸，则必须根据展示需要将其拉伸并压扁。 你可以在这里看到一个例子： http : //jsfiddle.net/9bheb/5/
