首頁 > web前端 > H5教程 > html5 canvas fillRect座標和大小的問題解決方法_html5教程技巧

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

WBOY
發布: 2016-05-16 15:48:22
原創
1477 人瀏覽過

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>



錯誤的方式2:
複製代碼


代碼如下:






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 );
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板