當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

canvas笔记-globalAlpha和globaleCompositeOperation的使用

發布時間：2025/3/15 编程问答 9 豆豆

生活随笔收集整理的這篇文章主要介紹了 canvas笔记-globalAlpha和globaleCompositeOperation的使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

如下代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">當前瀏覽器不支持canvas </canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");for(let i = 0; i < 100; i++){let R = Math.floor(Math.random() * 255);let G = Math.floor(Math.random() * 255);let B = Math.floor(Math.random() * 255);context.fillStyle = "rgb(" + R + "," + G + "," + B + ")";context.beginPath();context.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 100, 0, 2 * Math.PI);context.fill();}}</script></body> </html>

程序運行截圖如下：

修改腳本添加globalAlpha屬性后，代碼如下：

程序運行截圖如下：

globalAlpha會將所有元素的透明的進行更改。

下一個是globalCompositeOperation顧名思義就是整體圖形復合時的操作，保證哪個在上面，哪個在下面，哪個需要裁剪，哪個要隱藏等等。

其屬性值如下：

值描述

source-over	默認。在目標圖像上顯示源圖像。
source-atop	在目標圖像頂部顯示源圖像。源圖像位于目標圖像之外的部分是不可見的。
source-in	在目標圖像中顯示源圖像。只有目標圖像之內的源圖像部分會顯示，目標圖像是透明的。
source-out	在目標圖像之外顯示源圖像。只有目標圖像之外的源圖像部分會顯示，目標圖像是透明的。
destination-over	在源圖像上顯示目標圖像。
destination-atop	在源圖像頂部顯示目標圖像。目標圖像位于源圖像之外的部分是不可見的。
destination-in	在源圖像中顯示目標圖像。只有源圖像之內的目標圖像部分會被顯示，源圖像是透明的。
destination-out	在源圖像之外顯示目標圖像。只有源圖像之外的目標圖像部分會被顯示，源圖像是透明的。
lighter	顯示源圖像?+?目標圖像。
copy	顯示源圖像。忽略目標圖像。
xor	使用異或操作對源圖像與目標圖像進行組合

所有屬性值對應的效果圖是這樣的。

下面來一個簡單的小栗子

程序運行截圖如下：

源碼如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">當前瀏覽器不支持canvas </canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.globalCompositeOperation = "source-over";context.fillStyle = "red";context.fillRect(20, 20, 75, 50);context.fillStyle = "blue";context.fillRect(50, 50, 75, 50);context.globalCompositeOperation = "destination-over";context.fillStyle = "red";context.fillRect(150, 20, 75, 50);context.fillStyle = "blue";context.fillRect(180, 50, 75, 50);}</script></body> </html>

總結

以上是生活随笔為你收集整理的canvas笔记-globalAlpha和globaleCompositeOperation的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Web前端笔记-element ui中t
下一篇： Spring Boot笔记-设置拦截器为