Canvas学习Part3 - shadowColor 、shadowBlur、shadowOffsetX、shadowOffsetY

shadowColor

用法：设置或返回用于阴影的颜色。

shadowBlur

用法：设置或返回阴影的模糊级数。

shadowOffsetX

用法：设置或返回阴影与形状的水平距离。

shadowOffsetY

用法：设置或返回阴影与形状的垂直距离。

基本用法：

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.fillStyle="#dd3e54";
ctx.shadowColor="#6be585";
ctx.fillRect(20,20,100,80);
ctx.fillStyle="#2ebf91";
ctx.shadowColor="#8360c3";
ctx.fillRect(140,20,100,80);
</script>

 

X轴 Y轴

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetX=30;
ctx.shadowOffsetY=30;
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
//渐变填充
ctx.fillStyle=gradient;
ctx.shadowColor="#6be585";
ctx.fillRect(20,20,100,80);
</script>