DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> html5的canvas標簽(一)
html5的canvas標簽(一)
編輯:HTML5詳解     

目前IE體系的浏覽器尚不支持此標簽

在畫布上創建立體圖層:

html5的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

在畫布上繪制線段:

html5的canvas標簽(一)

<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();

創建多條交叉線段:

html5的canvas標簽(一)

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();

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved