HTML5 Canvas shadows可以向在HTML5畫布上繪制的形狀自動(dòng)添加陰影,shadowOffsetX 與 shadowOffsetY設(shè)置要繪制陰影的距離繪制形狀的距離。
可以向在HTML5畫布上繪制的形狀自動(dòng)添加陰影。這里有一些示例:
陰影是通過以下四個(gè)2D Context屬性控制的:
shadowOffsetX
shadowOffsetY
shadowBlur
shadowColor
shadowOffsetX 與 shadowOffsetY設(shè)置要繪制陰影的距離繪制形狀的距離。正值表示陰影繪制在形狀的（x）右側(cè)和（y）下方。負(fù)值表示陰影繪制在形狀的（x）左側(cè)和（y）上方。
shadowBlur設(shè)置陰影應(yīng)模糊的程度。該數(shù)字越高，形狀越模糊。數(shù)字越低，陰影變得越銳利。值為0表示陰影完全不模糊。
shadowColor 只需設(shè)置陰影的顏色。
這是上面示例的代碼:
<canvas id="ex1" width="500" height="200" style="border: 1px solid #cccccc;">
HTML5 Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 4;
context.shadowColor = "#666666";//或使用rgb（紅色，綠色，藍(lán)色）
context.fillStyle = "#000000";
context.fillRect(10,10, 50, 50);
context.fillStyle = "#000066";
context.font = "30px Arial";
context.fillText("HTML5 Canvas Shadow", 10,120);
</script>測(cè)試看看 ?/?