首頁 > 開發者 > JavaScript
html5 canvas（基本矩形），html5canvas矩形
先從簡單的開始
fillRect(x,y,width,height)
在座標x,y的位置加上一個寬，高 如：
fillRect(0,0,500,500)//在座標0，0處加上一個寬高500的填充矩形
strokeRect(x,y,width,height)
在座標x,y的位置加上一個寬，高邊框矩形
但是需要使用lineWidth,lineJoin,strokeStyle,miterLimit設定下面會給出矩形函數
clearRect(x,y,width,height)
清除座標x,y的位置寬，高的一塊地區是起完全透明
感覺有點像用ps時候一個黑色的圖層，拉一個矩形選框，然後按個delect的感覺一塊透明
然後設定一下填充樣式
context.fillStyle='#000000' //填充顏色context.strokeStyle='#ff00ff' //邊框顏色
完整代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>矩形</title><script src="js/modernizr.js"></script></head><body><script type="text/javascript">window.addEventListener('load',eventWindowLoaded,false);function eventWindowLoaded(){canvasApp();}function canvasSupport(){return Modernizr.canvas;}function canvasApp(){if(!canvasSupport()){return;}else{var theCanvas = document.getElementById('canvas')var context = theCanvas.getContext("2d")}drawScreen(); function drawScreen(){context.fillStyle="#000000"; //填充黑色context.strokeStyle='#ff00ff' //邊框為粉色context.lineWidth=2; //邊框寬度 context.fillRect(10,10,40,40) //矩形 context.strokeRect(0,0,60,60) //邊框出現的位置 context.clearRect(20,20,20,20) //清除地區的位置}}</script><canvas id="canvas" width="500" height="500">你的瀏覽器無法使用canvas如有疑問加QQ：1035417613;小白童鞋；你的支援是我最大的快樂！！</canvas></body></html>
結果就是這樣一個
如果對前面的結構不瞭解的話可以看我的上一篇http://www.cnblogs.com/LoveOrHate/p/4388321.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
