在canvas画布上多次绘制图形叠加的效果
生活随笔
收集整理的這篇文章主要介紹了
在canvas画布上多次绘制图形叠加的效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
如果在畫布2d上下文連續繪制多次相同的圖形，比如
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>畫布簡單實踐</title> </head> <body><div><canvas id="canvas"></canvas></div><script>window.onload = function() {var canvas = document.getElementById('canvas');canvas.width = 500;canvas.height = 500;var ctx = canvas.getContext('2d');// function loop() {// ctx.fillStyle = "rgb(0, 0, 0, 0.05)";//畫布黑設定為色；// ctx.fillRect(0, 0, canvas.width, canvas.height);//畫布設定為矩形；// requestAnimationFrame(loop);// }// loop();for(var i = 0; i < 5; i ++) {ctx.fillStyle = "rgb(0, 0, 0, 0.5)";//畫布設定為黑色，透明度0.5；ctx.fillRect(0, 0, canvas.width, canvas.height);//畫布設定為矩形；}}</script> </body> </html>像這樣連續繪制5個半透明的黑色矩形，疊加的效果最終就是一個接近黑色的矩形；
總結
以上是生活随笔為你收集整理的在canvas画布上多次绘制图形叠加的效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： VS2019+OpenCV4.5 鱼眼相
- 下一篇： 四叠半神话大系（bfs序+st+在线倍增