[TOC]
  • 默认的canvas的元素大小是300 x 150 像素

image.pngimage.png

canvas元素大小 600 x 300 canvas绘图表面大小 600 x 300

  • 在设置canvas宽高度的时候不许有px( 可以有px但是不符合canvas规范 ) ```javascript <!DOCTYPE html>

    Canvas not supported 
<a name="xQwL1"></a>
### canvas元素大小 600 x 300  canvas绘图表面大小 300 x 150
```javascript
<!DOCTYPE html>
   <head>
     <title>Canvas element size: 600 x 300, Canvas drawing surface size: 300 x 150</title>

      <style> 
         body {
            background: #dddddd;
         }

         #canvas {
            margin: 20px;
            padding: 20px;
            background: #ffffff;
            border: thin inset #aaaaaa;
            width: 600px;  /* Sets only the width and height of */
            height: 300px; /* the canvas element, not the drawing surface */
         }
      </style>
   </head>

  <body>
    <canvas id='canvas'>
      Canvas not supported
    </canvas>

    <script src='example.js'></script>
  </body>
</html>

代码1通过设置canvas元素的width和height属性来改变元素大小的，也可以通过代码2使用css设置canvas元素的效果，但是与通过width和height属性设置的结果并不一样
使用css设置canvas元素的大小与直接设置属性相比，css设置的canvas实际有两套尺寸，一个是元素本身的大小，一个是绘图表面的大小

  • 当设置元素的width和height属性时，实际上是同时修改了元素本身的大小和元素绘图表面的大小
  • 通过css来设定canvas的大小只会改变元素本身的大小 而不会影响元素绘图表面的大小（元素绘图表面默认300 x 150）

当canvas元素大小不符合其绘图表面大小时，浏览器会对绘图表面进行缩放使其符合元素本身的大小（可能会导致奇怪的效果）