html5 canvas标签 定义画布

目前IE体系的浏览器尚不支持此canvas标签。

在画布上创建立体图层：

<canvas id="myCanvas1">
第1块画布
</canvas>

#myCanvas1{border:1px #000 solid;}

function drawCanvas()
{
var canvas=document.getElementById('myCanvas1');
var ctx=canvas.getContext('2d');//创建2d画布
ctx.fillStyle='#66f';
ctx.fillRect(0,0,100,50);//图层1
ctx.fillStyle='#6ff';
ctx.fillRect(10,10,100,50);//图层2
ctx.fillStyle='#000';
ctx.fillRect(20,20,100,50);//图层3
ctx.fillStyle='#666';
ctx.fillRect(30,30,100,50);//图层4

}

在画布上绘制线段：

<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #c3c3c3;">
第2块画布
</canvas>

var c2=document.getElementById("myCanvas2");
var cxt2=c2.getContext("2d");
cxt2.moveTo(40,20);//起点
cxt2.lineTo(150,40);//第一根线
cxt2.lineTo(10,40);//第二根线
cxt2.stroke();

创建多条交叉线段：

var c3=document.getElementById("myCanvas3");
var cxt3=c3.getContext("2d");
cxt3.moveTo(0,0);
cxt3.lineTo(150,10);
cxt3.lineTo(10,80);
cxt3.lineTo(100,70);
cxt3.lineTo(0,0);
cxt3.stroke();