Javascript高级编程学习笔记（91）—— Canvas(8) 阴影

阴影

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

需要注意的是不同浏览器对阴影的支持存在差异

而且就算能完整支持的浏览器,不同浏览器之间的行为也存在着差异