html5 Canvas shadows可以向在html5畫布上繪制的形狀自動添加陰影,shadowOffsetX 與 shadowOffsetY設置要繪制陰影的距離繪制形狀的距離。 在線示例可以向在HTML5畫布上繪制的形狀自動添加陰影。這里有一些示例: 陰影是通過以下四個2D Context屬性控制的: shadowOffsetX shadowOffsetX 與 shadowOffsetY設置要繪制陰影的距離繪制形狀的距離。正值表示陰影繪制在形狀的(x)右側和(y)下方。負值表示陰影繪制在形狀的(x)左側和(y)上方。
示例 <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(紅色,綠色,藍色)
context.fillStyle = "#000000";
context.fillRect(10,10, 50, 50);
context.fillStyle = "#000066";
context.font = "30px Arial";
context.fillText("HTML5 Canvas Shadow", 10,120);
</script> |