HTML5之9__Canvas的ShadowAPI

来源：动视网责编：小采时间：2020-11-27 15:12:42

HTML5之9__Canvas的ShadowAPI

HTML5之9__Canvas的ShadowAPI:本文介绍 Canvas Shadow API ，为文本添加模糊阴影效果. 虽然之前已对 canvas 阴影效果应用有介绍 , 这里主要介绍对文本的阴影效果.阴影效果的使用也要把握好 "度". 看一个示例<!DOCTYPE html> <html>

推荐度：

点击下载本文 文档为doc格式

导读HTML5之9__Canvas的ShadowAPI:本文介绍 Canvas Shadow API ，为文本添加模糊阴影效果. 虽然之前已对 canvas 阴影效果应用有介绍 , 这里主要介绍对文本的阴影效果.阴影效果的使用也要把握好 "度". 看一个示例<!DOCTYPE html> <html>

本文介绍 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的ShadowAPI

推荐度：

点击下载本文 文档为doc格式

标签： API html5 shadow

热门焦点

HTML5之9__Canvas的ShadowAPI

HTML5之9__Canvas的ShadowAPI

HTML5之9__Canvas的ShadowAPI

最新推荐

猜你喜欢

热门推荐