目前IE體系的浏覽器尚不支持此標簽
在畫布上創建立體圖層:
<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();