HTML5 - Canvas的使用样例11（给绘制的内容添加阴影）
作者：hangge | 2016-02-09 10:31
Canvas还支持为绘制的任何内容添加阴影。阴影的形状与对应的绘制对象一样。特别是给带透明背景的图片加阴影时，阴影的形状会随不透明部分的形状变化。
1，阴影的相关属性
shadowColor：阴影颜色（通常使用中性灰，也可使用半透明的颜色。）
shadowBlur：阴影的模糊程度（0表示锐利的阴影，即轮廓与原始形状一样鲜明。一般20就比较模糊了。）
shadowOffsetX、shadowOffsetY：阴影相对于内容的位置（两个属性都设5，表示阴影在原图形向下、向右各5个像素的位置）
2，阴影的使用样例
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//绘制矩形阴影
context.rect(20, 20, 200 , 100);
context.fillStyle = "#8ED6FF";
context.shadowColor = "#bbbbbb";
context.shadowBlur = 20;
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.fill();
//绘制星形阴影
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 4;
var img = document.getElementById("star");
context.drawImage(img, 250, 30);
context.textBaseLine = "top";
context.font = "bold 20px Arial";
//绘制三行文本的阴影
context.shadowBlur = 3;
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.fillStyle = "steelblue";
context.fillText("Welcome to hangge.com", 10, 175);
context.shadowBlur = 5;
context.shadowOffsetX = 20;
context.shadowOffsetY = 20;
context.fillStyle = "green";
context.fillText("Welcome to hangge.com", 10, 225);
context.shadowBlur = 15;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowColor = "black"
context.fillStyle = "white";
context.fillText("Welcome to hangge.com", 10, 290);
全部评论（0）