html5-canvas繪制矩形的代碼 |
發(fā)布時(shí)間: 2012/8/20 18:07:27 |
html5-canvas繪制矩形的代碼,代碼如下所示: 計(jì)算機(jī)愛(ài)好者www.boydavid.com <!DOCTYPE html> <head> <title>canvas繪制矩形</title> </head> <script> function draw(id){
var canvas=document.getElementById(id); if(canvas==null){
return false;
}
var context=canvas.getContext('2d');
context.fillStyle='#eeeeff';
context.fillRect(0,0,400,300);
context.fillStyle='red'; context.strokeStyle='blue';
context.lineWidth=10;
context.fillRect(50,50,100,100); 電腦軟件www.boydavid.com context.strokeRect(50,50,100,100);
context.fillStyle='#f60';
context.strokeStyle='#ccc'; 電腦知識(shí)www.boydavid.com context.lineWidth=5; 電腦維護(hù)www.boydavid.com context.fillRect(200,200,100,100);
context.strokeRect(150,150,100,100); 計(jì)算機(jī)學(xué)習(xí)網(wǎng)站www.boydavid.com }
</script>
<body onload="draw('canvas')"> 電腦知識(shí)www.boydavid.com <h1>canvas元素繪制矩形</h1> <canvas id="canvas" width="400" height="300" />
</body> 電 本文出自:億恩科技【www.cmtents.com】 服務(wù)器租用/服務(wù)器托管中國(guó)五強(qiáng)!虛擬主機(jī)域名注冊(cè)頂級(jí)提供商!15年品質(zhì)保障!--億恩科技[ENKJ.COM] |