首頁 > 文章 > web前端 > js繪製兩個相交的矩形並且其中有一個包含透明度

js繪製兩個相交的矩形並且其中有一個包含透明度

藏色散人原創: 2021-08-02 14:17:411559瀏覽

哈嘍~今天要跟大家介紹怎麼透過javascript繪製兩個相交的矩形並且其中一個具有alpha透明度，乍看之下是不是有點不明所以？下面我們直接來看一張效果圖，就能一目了然了！

如圖：

明白了吧~

也就說現在需要我們透過寫一個javascript程式來實現這樣的一個效果圖，大家有沒有思路呀？

哈哈，不廢話啦，我們直奔主題。

上程式碼：

<!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事件在頁面載入完成後立即觸發。注意：所有主要瀏覽器都支援 onload 事件。

3、<canvas></canvas>標籤定義圖形，例如圖表和其他圖像。注意：Internet Explorer 8 或更早的瀏覽器不支援

4、fillStyle 屬性設定或傳回用於填滿繪畫的顏色、漸層或模式。預設值是#000000；其js語法為「context.fillStyle=color|gradient|pattern;」。

5、fillRect() 方法繪製「已填色」的矩形。預設的填滿顏色是黑色；其js語法為「context.fillRect(x,y,width,height);」。

最後推薦本平台經典的課程《JavaScript極速入門_玉女心經系列》，公益免費的~歡迎大家學習~

以上是js繪製兩個相交的矩形並且其中有一個包含透明度的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript JS 对象事件 canvas

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：你知道前端是如何實現浮水印的嗎下一篇：你知道前端是如何實現浮水印的嗎

看更多