代碼:javascript
1 <canvas id="c1" width="400" height="400" style="background-color:red"> 2 </canvas> 3 4 <script type="text/javascript"> 5 //獲取畫布元素 6 var canvas=document.getElementById("c1"); 7 //繪製環境(我稱爲「畫筆」) 8 var cxt=canvas.getContext("2d"); 9 10 //改變填充的顏色 11 cxt.fillStyle="#ffff00"; 12 //畫一個實體方塊---fillrect(x,y,w,h); 13 cxt.fillRect(50,50,100,100); 14 15 //改變邊框顏色 16 cxt.strokeStyle="blue"; 17 //改變邊框寬度 18 cxt.lineWidth=5; 19 //畫出一個空心方塊---strokeRect(x,y,w,h); 20 //cxt.strokeRect(200,200,100,100); 21 cxt.strokeRect(200.5,200.5,100,100); 22 </script>
【新知識點】:java
一、fillStyle //填充的顏色canvas
二、strokeStyle //邊框的顏色spa
三、lineWidth //線寬度code
【注意】:(否則將不會運行)blog
屬性,方法都用的駱駝命名法,首字母爲小寫,第二個單詞首字母大寫;如userName。由於看上去像駝峯,所以而得名。ip