?視頻課堂https://edu.csdn.net/course/play/7621

組合圖形?

?繪制陰影 <canvas id="canvas" width="500" height="500"></canvas><script>function draw(){var c=document.getElementById("canvas");var ctx=c.getContext("2d");ctx.fillStyle="yellow";ctx.strokeStyle="yellow";var centerX=100;var centerY=100;var radius=50;var startAngle=0;var endAngle=2*Math.PI;//保存當前的繪圖狀態ctx.save();ctx.setTransform(1,0,-0.5,1,100,0);//開始繪圖路徑;ctx.beginPath();ctx.arc(centerX,centerY,radius,startAngle,endAngle,false);ctx.strokeStyle="white";ctx.stroke();ctx.fillStyle="rgba(0,0,0,0.2)";ctx.fill();//填充樣式和填充完畢;ctx.restore();ctx.beginPath();ctx.arc(centerX,centerY,radius,startAngle,endAngle,false);ctx.stroke();ctx.fill();}window.addEventListener("load",draw(),true);</script>

<canvas id="canvas2" width="500" height="500"></canvas><script>function draw2(){var c=document.getElementById("canvas2");var ctx=c.getContext("2d");ctx.fillStyle="yellow";ctx.fillRect(0,0,100,100);ctx.fillStyle="blue";ctx.fill();ctx.globalCompositeOperation="source-over";//畫圓;var centerX=100;var centerY=100;var radius=50;var startAngle=0;var endAngle=2*Math.PI;ctx.beginPath();ctx.arc(centerX,centerY,radius,startAngle,endAngle,false);ctx.fill();}window.addEventListener("load",draw2(),true);</script>在繪制圖形時，如果畫布上已經有圖形，就涉及到一個問題：兩個圖形如何組合。可以通過CanvasRenderingContext2D.globalCompositeOperation屬性來設置組合方式

<canvas id="canvas3" width="500" height="500"></canvas><script>function draw3(){var c=document.getElementById("canvas3");var ctx=c.getContext("2d");ctx.fillStyle="yellow";ctx.save();//保存填充樣式的顏色.ctx.shadowBlur=20; //設置像素模糊值為20；ctx.shadowOffsetX=15;//橫向值為15;ctx.shadowOffsetY=15;//縱向值為15；ctx.shadowColor="blue";ctx.fillRect(50,50,100,100);ctx.restore();ctx.fillRect(200,50,100,100);}window.addEventListener("load",draw3(),true);</script>

在繪制圖形時，可以通過CanvasRenderingContext2D的一組屬性設置圖形的陰影?

屬??性??名	具?體?描述
shadowBlur	陰影的像素模糊值
shadowOffsetX	陰影在x軸上的偏移值
shadowOffsetY	陰影在y軸上的偏移值
shadowColor	陰影顏色值

總結

以上是生活随笔為你收集整理的Canvas3 绘图和重叠的全部內容，希望文章能夠幫你解決所遇到的問題。

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