fillRect是HTML5中的方法,可以用于在畫布上繪制已填充的矩形,默認(rèn)的填充顏色是黑色,下面我們就來看一看fillRect方法的具體使用。
我們先來看一下fillRect的基本語法
context.fillRect(x,y,width,height);
x表示矩形左上角的 x 坐標(biāo)。
y表示矩形左上角的 y 坐標(biāo)。
width表示矩形的寬度。
height表示矩形的高度。
(參考:HTML5 canvas)
下面我們來看具體的示例
代碼如下
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body> <canvas id="rectangle" width="200" height="200"></canvas> <script> // 使用JS獲取canvas元素 var canvas=document.getElementById('rectangle'); // 獲取canvas var c=canvas.getContext('2d'); // 在畫布上繪制一個(gè)矩形 c.fillRect(50,50,100,100); </script> </body> </html>
效果如下:繪制了一個(gè)填充黑色的矩形
本篇文章到這里就全部結(jié)束了,更多有關(guān)前端的精彩內(nèi)容大家可以關(guān)注PHP中文網(wǎng)的其他相關(guān)欄目教程?。。?/p>