您的位置：首页 > 其它

canvas内的字体实现阴影效果

2018-01-12 16:52 656 查看

api介绍

可以通过几种全局context属性来控制阴影。

shadowColor

任何CSS中的颜色值。可以使用透明度（alpha）

ShadowOffsetX

像素值。值为正数，向右移动阴影；值为负数，向左移动阴影

shadowOffsetY

像素值。值为正数，向下移动阴影；值为负数，向上移动阴影

shadowBlur

高斯模糊值。值越大，阴影边缘越模糊

案例代码

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>练习</title>
<style>
#myCanvas {
background-color:#00ffff
}
</style>
</head>
<body>
<canvas id="myCanvas" width="1072" height="200">您的浏览器不支持canvas！</canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// 设置文字阴影的颜色为黑色，透明度为20%
context.shadowColor = 'rgba(0, 0, 0, 0.2)';
// 将阴影向右移动15px，向上移动10px
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
// 轻微模糊阴影
context.shadowBlur = 2;
// 字号为60px，字体为impact
context.font = "100px 楷体";
// 将文本填充为棕色
context.fillStyle = '#ffffff';
// 将文本设为居中对齐
context.textAlign = 'center';
context.textBaseline='middle';
// 在canvas顶部中央的位置，以大字体的形式显示文本
context.fillText('现在学习也不晚', 536, 100);
context.restore();
</script>
</body>
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航