Canvas 阴影效果

Canvas 提供了四个属性用于设置阴影效果

属性 说明
shadowOffsetX 设置阴影在 X 延伸距离,不受变换矩阵所影响
负值表示阴影会往上或左延伸,正值则表示会往下或右延伸,默认 0
shadowOffsetY 设置阴影在 Y 轴的延伸距离,不受变换矩阵所影响
负值表示阴影会往上或左延伸,正值则表示会往下或右延伸,默认 0
shadowBlur 设置阴影的模糊程度,其数值并不跟像素数量挂钩,也不受变换矩阵的影响,默认为 0
shadowColor 标准的 CSS 颜色值,用于设定阴影颜色效果,默认是全透明的黑色

当然了,这些阴影效果和 fillStyle 是一样的,一旦设置,后面绘制的图形都有阴影效果

范例

给文字绘制阴影效果

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="300" height="100">
</canvas>
<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");

ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(255, 0, 0, 0.5)";

ctx.font = "44px Times New Roman";

ctx.fillText("www.twle.cn",10,50);

</script>

运行结果如下



Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.