html5 canvas fillRect座標和大小的問題解決方法_html5教程技巧

fillRect(100,100,100,100) 前2個100是指座標，後2個100是指寬和高。

今天學習html5 的canvas，發現fillRect的座標和大小一直不對，研究了半天，發現canvas的寬度和高度必須內聯在canvas標籤中才對。鬱悶了半天。

錯誤的方式1:

複製程式碼

程式碼如下:

程式碼如下:











<script> <br />var c = document.getElementById('mycanvas'); <br />var ctx = c.getContext ("2d"); <br />ctx.fillStyle='#f36'; <br />ctx.fillRect(100, 100, 100, 100); </script>

錯誤的方式2：

複製代碼

代碼如下:










<script> <br />var c = document.getElementById('mycanvas'); <br />var ctx = c.getContext("2d"); <br />ctx.fillStyle='#f36'; <br /> ctx.fillRect(100, 100, 100, 100); </script>

顯示結果：

正確的方式：

複製程式碼

程式碼如下:



程式碼如下:










<script> </script>

var c = document.getElementById('mycanvas'); var ctx = c.getContext("2d"); ctx.fillStyle='#f36'; ctx.fillRect(100, 100, 100, 1000, 1000, 100 );