阴影
2D上下文将会根据以下属性为形状或路径绘制阴影
- shadowColor: 用于设置阴影颜色,默认为黑色
- shadowOffsetX: 形状或路径X方向的阴影偏移量,默认为0
- shadowOffsetY: 形状或路径y轴方向的阴影偏移量,默认为0
- shadowBlur: 模糊的像素数,默认为0, 即不模糊
这些属性都可以通过 context 对象来修改,只要在绘制之前为其设置值,就能自动产生阴影
var context = drawing.getContext("2d"); // 设置阴影
context.shadowColor = "rgba(0, 0, 0, 0.5)";
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4; // 绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50); // 绘制蓝色矩形
context.fillStyle = "rgba(0, 0, 255, 1)";
conttext.fillRect(30, 30, 50, 50);
需要注意的是不同浏览器对阴影的支持存在差异
而且就算能完整支持的浏览器,不同浏览器之间的行为也存在着差异