canvas的用途之繪制矩形
繪制矩形
矩形是唯一一種可以直接在 2D 上下文中繪制的形狀。與矩形有關(guān)的方法包括fillRect()、strokeRect()和 clearRect()。這三個方法都能接收 4 個參數(shù)：矩形的 x 坐標、矩形的 y 坐標、矩形寬度和矩形高度页屠。這些參數(shù)的單位都是像素。
1.fillRect()
fillRect()方法在畫布上繪制的矩形會填充指定的顏色蓖柔。填充的顏色通過 fillStyle 屬性指定辰企，比如：
var drawing = document.getElementById("drawing");
//確定瀏覽器支持<canvas>元素
if (drawing.getContext){
var context = drawing.getContext("2d");
/*
* 根據(jù) Mozilla 的文檔
* http://developer.mozilla.org/en/docs/Canvas_tutorial:Basic_usage
*/
//繪制紅色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//繪制半透明的藍色矩形
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30, 30, 50, 50);
}
以上代碼首先將 fillStyle 設(shè)置為紅色，然后從(10,10)處開始繪制矩形况鸣，矩形的寬和高均為 50 像
素牢贸。然后，通過 rgba()格式再將 fillStyle 設(shè)置為半透明的藍色镐捧，在第一個矩形上面繪制第二個矩形潜索。結(jié)果就是可以透過藍色的矩形看到紅色的矩形。
2.strokeRect()
strokeRect()方法在畫布上繪制的矩形會使用指定的顏色描邊懂酱。描邊顏色通過 strokeStyle 屬性指定竹习。比如：
var drawing = document.getElementById("drawing");
//確定瀏覽器支持<canvas>元素
if (drawing.getContext){
var context = drawing.getContext("2d");
/*
* 根據(jù) Mozilla 的文檔
* http://developer.mozilla.org/en/docs/Canvas_tutorial:Basic_usage
*/
//繪制紅色描邊矩形
context.strokeStyle = "#ff0000";
context.strokeRect(10, 10, 50, 50);
//繪制半透明的藍色描邊矩形
context.strokeStyle = "rgba(0,0,255,0.5)";
context.strokeRect(30, 30, 50, 50);
}
以上代碼繪制了兩個重疊的矩形。不過列牺，這兩個矩形都只有框線整陌，內(nèi)部并沒有填充顏色。描邊線條的寬度由 lineWidth 屬性控制，該屬性的值可以是任意整數(shù)泌辫。另外并炮，通過 lineCap 屬性可以控制線條末端的形狀是平頭、圓頭還是方頭（"butt"甥郑、"round"或"square"），通過 lineJoin 屬性可以控制線條相交的方式是圓交荤西、斜交還是斜接（"round"澜搅、"bevel"或"miter"）。
3.clearRect()
clearRect()方法用于清除畫布上的矩形區(qū)域邪锌。本質(zhì)上勉躺，這個方法可以把繪制上下文中的某一矩形區(qū)域變透明。通過繪制形狀然后再清除指定區(qū)域觅丰，就可以生成有意思的效果饵溅，例如把某個形狀切掉一塊。下面看一個例子妇萄。
var drawing = document.getElementById("drawing");
//確定瀏覽器支持<canvas>元素
if (drawing.getContext) {
var context = drawing.getContext("2d");
/*
* 根據(jù) Mozilla 的文檔
* http://developer.mozilla.org/en/docs/Canvas_tutorial:Basic_usage
*/
//繪制紅色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//繪制半透明的藍色矩形
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30, 30, 50, 50);
//在兩個矩形重疊的地方清除一個小矩形
context.clearRect(40, 40, 10, 10);
}
參考鏈接：
