时间:2021-07-01 10:21:17 帮助过:29人阅读
阴影效果的使用也要把握好 "度".
看一个示例
<!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.gxlcms.com)!