canvas笔记-globalAlpha和globaleCompositeOperation的使用
生活随笔
收集整理的這篇文章主要介紹了
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屬性后，代碼如下：
<script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.globalAlpha = 0.5;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>程序運行截圖如下：
?
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
- 下一篇： Postman|Qt笔记-解决Could