先從簡單的開始
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