武林網(www.vevb.com)文章簡介:html5-canvas標籤--繪製矩形。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>html5-canvas標籤--繪製矩形</title>
</head>
<body>
<canvas id=1 width=200 height=200></canvas>
<script type=text/javascript>
window.onload = function(){
var canva =document.getElementById('1')
var content =canva.getContext('2d')
content.fillStyle = #ccc;//填充canvas的背景顏色
content.fillRect(0, 0, 200, 200);//參數分別表示x軸,y軸,寬度,高度
content.lineWidth = 4;//邊框寬度
content.strokeStyle = #fff;//邊框顏色
content.strokeRect(50,50,100,100);//邊框坐標及大小
content.fillStyle = #f00;//矩形填充顏色
content.fillRect(50,50,100,100);//矩形坐標及大小
}
</script>
</body>
</html>