1. 标签
<canvas id="tutorial" width="150" height="150"></canvas>
canvas：本身相当于我们游戏开中所说的画布，默认是width 300 height 150
带2个属性：
width ：制定画布的宽
height：制定画布的高
id： 是html中每个标签自带的属性
2. 渲染上下文（Rendering Context）
<canvas> 初始化是空白的，要在上面用脚本画图首先需要其渲染上下文（rendering context），它可以通过 canvas 元素对象的 getContext 方法来获取，同时得到的还有一些画图用的函数。getContext() 接受一个用于描述其类型的值作为参数。
//获得dom模型中的canvas对象
var canvas = document.getElementById('tutorial');
//制定canvas的绘制内容为2d的方式var ctx = canvas.getContext('2d');3.简单示例
<html> <head> <script type="application/x-javascript"> 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); } } </script> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html>