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>
584
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
