站長資訊網(wǎng)哈嘍~今天給大家介紹怎么通過javascript繪制兩個相交的矩形并且其中一個具有alpha透明度，乍一看是不是有點不明所以？下面我們直接來看一張效果圖，就能一目了然了！
如圖：
明白了吧~
也就說現(xiàn)在需要我們通過編寫一個javascript程序來實現(xiàn)這樣的一個效果圖，大家有沒有思路呀？
哈哈，不廢話啦，我們直奔主題。
上代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js繪制兩個相交的矩形并且其中有一個包含透明度</title> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> <script> function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var context = canvas.getContext("2d"); context.fillStyle = "rgb(256,0,0)"; context.fillRect (15, 10, 55, 50); context.fillStyle = "rgba(0, 0, 200, 0.6)"; context.fillRect (35, 30, 55, 50); } } </script> </body> </html>
大家可以直接復制本段代碼到本地進行運行測試，其效果是跟上圖一樣的。
那么關于上述代碼，我們介紹幾個重要的知識點：
1、getElementById() 方法可返回對擁有指定 ID 的第一個對象的引用。
2、Body onload事件，onload事件在頁面載入完成后立即觸發(fā)。注：所有主要瀏覽器都支持 onload 事件。
3、<canvas>標簽定義圖形，比如圖表和其他圖像。注意：Internet Explorer 8 或更早的瀏覽器不支持 <canvas> 元素，并且<canvas> 標簽只是圖形容器，必須使用腳本來繪制圖形。
4、fillStyle 屬性設置或返回用于填充繪畫的顏色、漸變或模式。默認值是#000000；其js語法是“context.fillStyle=color|gradient|pattern;”。
5、fillRect() 方法繪制“已填色”的矩形。默認的填充顏色是黑色；其js語法是“context.fillRect(x,y,width,height);”。
最后給大家推薦本平臺經典的課程《JavaScript極速入門_玉女心經系列》，公益免費的~歡迎大家學習~
