溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容主要講解“怎么用js繪制兩個(gè)相交的矩形并且其中有一個(gè)包含透明度”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么用js繪制兩個(gè)相交的矩形并且其中有一個(gè)包含透明度”吧!
哈嘍~今天給大家介紹怎么通過javascript繪制兩個(gè)相交的矩形并且其中一個(gè)具有alpha透明度，乍一看是不是有點(diǎn)不明所以？下面我們直接來看一張效果圖，就能一目了然了！
如圖：
明白了吧~
也就說現(xiàn)在需要我們通過編寫一個(gè)javascript程序來實(shí)現(xiàn)這樣的一個(gè)效果圖，大家有沒有思路呀？
哈哈，不廢話啦，我們直奔主題。
上代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js繪制兩個(gè)相交的矩形并且其中有一個(gè)包含透明度</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>大家可以直接復(fù)制本段代碼到本地進(jìn)行運(yùn)行測(cè)試，其效果是跟上圖一樣的。
那么關(guān)于上述代碼，我們介紹幾個(gè)重要的知識(shí)點(diǎn)：
1、getElementById() 方法可返回對(duì)擁有指定 ID 的第一個(gè)對(duì)象的引用。
2、Body onload事件，onload事件在頁面載入完成后立即觸發(fā)。注：所有主要瀏覽器都支持 onload 事件。
3、<canvas>標(biāo)簽定義圖形，比如圖表和其他圖像。注意：Internet Explorer 8 或更早的瀏覽器不支持 <canvas> 元素，并且<canvas> 標(biāo)簽只是圖形容器，必須使用腳本來繪制圖形。
4、fillStyle 屬性設(shè)置或返回用于填充繪畫的顏色、漸變或模式。默認(rèn)值是#000000；其js語法是“context.fillStyle=color|gradient|pattern;”。
5、fillRect() 方法繪制“已填色”的矩形。默認(rèn)的填充顏色是黑色；其js語法是“context.fillRect(x,y,width,height);”。
到此，相信大家對(duì)“怎么用js繪制兩個(gè)相交的矩形并且其中有一個(gè)包含透明度”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼