★Canvas绘制矩形★

请勿抄袭本页面

---

代码说明

本例介绍通过Canvas来绘制矩形，代码中已包括详细解释。转自Hiro技术站

fillRect(0, 0, 100, 100);中的(0,0,100,100)分别为矩形的左上角的X，Y坐标，矩形的宽度和高度

---

html代码

<canvas id="rect" width="100px" height="100px" style="border:1px solid gold;"></canvas> <script type="text/javascript"> var rect = document.getElementById('rect').getContext('2d'); //画一个100x100的正方形 rect.fillStyle = 'orange';//矩形的填充颜色 rect.fillRect(0, 0, 100, 100);//分别为矩形的左上角的X，Y坐标，矩形的宽度和高度 //在100x100的正方形中间截去一个60x60的正方形 rect.clearRect(20, 20, 60, 60);//同上 </script>

---

代码演示

---

[代码仅供参考，转载请注明出处]

---