context:context是一个封装了很多绘图功能的对象，获取这个对象的方法是

var context =canvas.getContext("2d");

也许这个2d勾起了大家的无限遐想，但是很遗憾的告诉你html5还只是个少女，不提供3d服务。

canvas元素绘制图像的时候有两种方法，分别是

context.fill()//填充

context.stroke()//绘制边框

style:在进行图形绘制前，要设置好绘图的样式

context.fillStyle//填充的样式

context.strokeStyle//边框样式

context.lineWidth//图形边框宽度

颜色的表示方式:

直接用颜色名称:"red" "green" "blue"

十六进制颜色值: "#EEEEFF"

rgb(1-255,1-255,1-255)

rgba(1-255,1-255,1-255,透明度)

和GDI是如此的相像，所以用过GDI的朋友应该很快就能上手

1. 绘制矩形  context.fillRect(x,y,width,height)  strokeRect(x,y,width,height)

x:矩形起点横坐标（坐标原点为canvas的左上角，当然确切的来说是原始原点，后面写到变形的时候你就懂了，现在暂时不用关系）

y:矩形起点纵坐标

width:矩形长度

height:矩形高度

function draw21(id) {
            var canvas = document.getElementById(id)
            if (canvas == null)
                return false;
            var context = canvas.getContext("2d");
            //实践表明在不设施fillStyle下的默认fillStyle=black
            context.fillRect(0, 0, 100, 100);
            //实践表明在不设施strokeStyle下的默认strokeStyle=black
            context.strokeRect(120, 0, 100, 100);
            //设置纯色
            context.fillStyle = "red";
            context.strokeStyle = "blue";
            context.fillRect(0, 120, 100, 100);
            context.strokeRect(120, 120, 100, 100);
            //设置透明度实践证明透明度值>0,<1值越低，越透明，值>=1时为纯色，值<=0时为完全透明 context.fillStyle = "rgba(255,0,0,0.2)"; context.strokeStyle = "rgba(255,0,0,0.2)"; context.fillRect(240,0 , 100, 100); context.strokeRect(240, 120, 100, 100); }

下图是范例

2.清除矩形区域 context.clearRect(x,y,width,height)

x:清除矩形起点横坐标

y:清除矩形起点纵坐标

width:清除矩形长度

height:清除矩形高度

function draw22(id) {
            var canvas = document.getElementById(id)
            if (canvas == null)
                return false;
            var context = canvas.getContext("2d");
            //实践表明在不设施fillStyle下的默认fillStyle=black
            context.fillRect(0, 0, 100, 100);
            //实践表明在不设施strokeStyle下的默认strokeStyle=black
            context.strokeRect(120, 0, 100, 100);
            //设置纯色
            context.fillStyle = "red";
            context.strokeStyle = "blue";
            context.fillRect(0, 120, 100, 100);
            context.strokeRect(120, 120, 100, 100);
            //设置透明度实践证明透明度值>0,<1值越低，越透明，值>=1时为纯色，值<=0时为完全透明 context.fillStyle = "rgba(255,0,0,0.2)"; context.strokeStyle = "rgba(255,0,0,0.2)"; context.fillRect(240, 0, 100, 100); context.strokeRect(240, 120, 100, 100); context.clearRect(50, 50, 240, 120); }

如下图：