HTML5之9 __Canvas 的Shadow API
本文介绍 Canvas Shadow API ， 为文本添加模糊阴影效果. 虽然之前已对 canvas 阴影效果应用 有介绍 , 这里主要介绍对文本的阴影效果.
阴影效果的使用也要把握好 "度".
看一个示例
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>文本阴影示例</title>
<canvas id="trails" style="border: 1px solid;" width="400" height="300"> </canvas>
<script>
drawTrails();
function drawTrails() {
var canvas = document.getElementById('trails');
var context = canvas.getContext('2d');
context.save();
context.font = "60px impact";
context.fillStyle = '#996600'
context.textAlign = 'center';
// 设置文字阴影的颜色为黑色，透明度为20%
context.shadowColor = 'rgba(0, 0, 0, 0.2)';
// 将阴影向右移动15px, 向上移动10px
context.shadowOffsetX = 15;
context.shadowOffsetY = -10;
// 轻微模糊阴影
context.shadowBlur = 2;
context.fillText('Happy Trails!', 200, 60, 400);
context.restore();
}
</script>
</html>登录后复制
运行效果图
以上是由CSS样式生成的阴影，它只有位置上的变化，而无法与之前介绍的变换生成的阴影(树影)保持同步. 为了一致起见， 在canvas 上绘制阴影时，应该尽量只用一种方法
以上就是HTML5之9 __Canvas 的Shadow API 的内容，更多相关内容请关注PHP中文网（www.php.cn）！
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
4 周前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前
By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
2 周前
By DDD
R.E.P.O.如果您听不到任何人，如何修复音频
4 周前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
4 周前
By 尊渡假赌尊渡假赌尊渡假赌
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
