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

2024-04-01 15:43:26

阴影

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

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

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

最新文章

热门文章