Canvas的基本用法

canvas没有设置宽度和高度的时候，会初始化宽度：300像素和高度：150像素。可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。

如果你绘制出来的图像是扭曲的, 尝试在<canvas>的属性中明确规定宽和高，而不是使用CSS。

如果浏览器不支持<canvas>，那么在<canvas>标签输入替换提示内容。支持<canvas>的浏览器将会忽略替换提示内容，正常渲染canvas。

<canvas id="stockGraph" width="150" height="150">
        您的浏览器不支持canvas 功能   <!--在不支持该功能的浏览器时出现-->
         <img src="data:images/clock.png" width="150" height="150" alt=""/>  <!--在支持该功能的浏览器时出现-->
</canvas> 

</canvas>结束标签不能省！！如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。

---

渲染上下文

//通过使用 document.getElementById() 方法来为 <canvas> 元素得到DOM对象
var canvas = document.getElementById('tutorial');
// 使用getContext() 方法来访问绘画上下文。
var ctx = canvas.getContext('2d');

---

检查兼容性

替换内容是用于在不支持 <canvas> 标签的浏览器中展示的。通过测试getContext()方法的存在，脚本可以检查编程支持性。

var canvas = document.getElementById('tutorial');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

简单模板

<body>
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>

<style type="text/css">
      canvas { border: 1px solid black; }
    </style>

window.onload=function(){
    draw();
}
function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }

当页面加载结束的时候就会执行draw()这个函数。通过使用在文档上加载事件来完成。只要页面加载结束，这个函数，或者像是这个的，同样可以使用window.setTimeout()， window.setInterval()，或者其他任何事件处理程序来调用。

简单的例子：

function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }

效果如下：