Latest web development tutorials

HTML canvas fillRect() 方法

HTML canvas 參考手冊 HTML canvas參考手冊

實例

繪製150*100 像素的已填充矩形:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(20,20,150,100);

嘗試一下»

瀏覽器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome 和Safari 支持fillRect() 方法。

注意: Internet Explorer 8及之前的版本不支持<canvas>元素。


定義和用法

fillRect() 方法繪製"已填充"的矩形。 默認的填充顏色是黑色。

提示:請使用fillStyle屬性來設置用於填充繪圖的顏色、漸變或模式。

JavaScript 語法: context.fillRect(x,y,width,height);

參數值

参数 描述
x 矩形左上角的 x 坐标。
y 矩形左上角的 y 坐标。
width 矩形的宽度,以像素计。
height 矩形的高度,以像素计。


HTML canvas 參考手冊 HTML canvas參考手冊