fillRect(100,100,100,100) 前2個100是指座標,後2個100是指寬和高。
今天學習html5 的canvas,發現fillRect的座標和大小一直不對,研究了半天,發現canvas的寬度和高度必須內聯在canvas標籤中才對。鬱悶了半天。
錯誤的方式1:
程式碼如下:
Document
<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>
複製代碼
代碼如下:
Document
<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>
顯示結果: 複製程式碼
程式碼如下:
程式碼如下:
Document
<script> </script>
var c = document.getElementById('mycanvas'); var ctx = c.getContext("2d"); ctx.fillStyle='#f36'; ctx.fillRect(100, 100, 100, 1000, 1000, 100 );