HTML5 Canvas 阴影

html5 Canvas shadows可以向在html5画布上绘制的形状 自动添加 阴影,shadowOffsetX 与 shadowOffsetY设置要绘制阴影的距离绘制形状的距离。

在线示例

可以向在HTML5画布上绘制的形状 自动添加 阴影。这里有一些示例:

阴影是通过以下四个2D Context 属性 控制的:

shadowOffsetX
shadowOffsetY
shadowBlur
shadowColor

shadowOffsetX 与 shadowOffsetY设置要绘制阴影的距离绘制形状的距离。正值表示阴影绘制在形状的（x）右侧和（y）下方。负值表示阴影绘制在形状的（x）左侧和（y）上方。
shadowBlur设置阴影应模糊的程度。该数字越高，形状越模糊。数字越低，阴影变得越锐利。值为0表示阴影完全不模糊。
shadowColor 只需设置阴影的颜色。
这是上面示例的 代码 :

示例

<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>

HTML5 Canvas 绘制文本 ? ?HTML5 Canvas 渐变

查看更多关于HTML5 Canvas 阴影的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did92382