HTML5 Canvas (4) - 陰影及透明

HTML 5 canvas

HTML5 Canvas 陰影及透明。

7. 陰影

使用shadowOffsetX及shadowOffsetY指定陰影位移的距離，使用shadowColor指定陰影的顏色，使用shadowBlur指定陰影的模糊程度。

context.shadowOffsetX = X軸位移值;
context.shadowOffsetY = Y軸位移值;
context.shadowColor = "顏色值";
context.shadowBlur = "模糊度";

程式碼：

context.rect(50, 50, 100, 100);
context.fillStyle = "#FFA500";
context.shadowColor = "#999999";
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 10;
context.fill();

8. 透明度

使用globalAlpha來指定透明度，它會影響在該指令之後的所有圖形，所以如果第1個及第2個圖形透明度要不同的話，那就必須在每個圖形之前重設透明值。透明值介於0~1之間。0是全透明，1是完全不透明。

context.globalAlpha = 透明值(0~1);

程式碼：

context.beginPath();
context.rect(50, 50, 200, 200);
context.fillStyle = "#FFA500";
context.fill();

context.globalAlpha = 0.3;
context.beginPath();
context.rect(175, 75, 150, 150);
context.fillStyle = "#008000";
context.fill();

context.globalAlpha = 0.9;
context.beginPath();
context.rect(125, 25, 100, 100);
context.fillStyle = "#800000";
context.fill();

本文網址：https://blog.tonycube.com/2012/03/html5-canvas-4.html
由 Tony Blog 撰寫，請勿全文複製，轉載時請註明出處及連結，謝謝 😀