HTML5中使用Canvas绘制带阴影效果的图形

作者：袖梨 2022-06-25

1，阴影的相关属性

HTML5 Canvas中提供了设置阴影的四个属性值分别为：

context.shadowColor = “red” 表示设置阴影颜色为红色

context.shadowOffsetX = 0表示阴影相对TEXT的水平距离，0表示两者水平位置重合

context.shadowOffsetY = 0表示阴影相对TEXT的垂直距离，0表示两者垂直位置重合

context.shadowBlur = 10 阴影模糊效果，值越大模糊越厉害。

shadowColor：阴影颜色（通常使用中性灰，也可使用半透明的颜色。）
shadowBlur：阴影的模糊程度（0表示锐利的阴影，即轮廓与原始形状一样鲜明。一般20就比较模糊了。）
shadowOffsetX、shadowOffsetY：阴影相对于内容的位置（两个属性都设5，表示阴影在原图形向下、向右各5个像素的位置）

一个最简单的带有阴影的矩形代码如下：

context.shadowColor = "RGBA(127,127,127,1)";

context.shadowOffsetX = 3;

context.shadowOffsetY = 3;

context.shadowBlur = 0;

context.fillStyle = "RGBA(0, 0, 0, 0.8)";

context.fillRect(10, hh+10, 200,canvas.height/4-20);

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 111com.net", 10, 175);

context.shadowBlur = 5;
context.shadowOffsetX = 20;
context.shadowOffsetY = 20;
context.fillStyle = "green";
context.fillText("Welcome to 111com.net", 10, 225);

context.shadowBlur = 15;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowColor = "black"
context.fillStyle = "white";
context.fillText("Welcome to 111com.net", 10, 290);