在HTML5 Canvas绘制阴影示例
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myownCanvas {
border: 2px solid #9C9898;
}
</style>
<script>
window.onload = function () {
var canvas = document.getElementById("myownCanvas");
var context = canvas.getContext("2d");
context.rect(188, 40, 200, 100);
context.fillStyle = "blue";
context.shadowColor = "gray";
context.shadowBlur = 25;
context.shadowOffsetX = 20;
context.shadowOffsetY = 20;
context.fill();
};
</script>
</head>
<body>
<canvas id="myownCanvas" width="600" height="220"></canvas>
</body>
</html>
HTML5 Canvas阴影
就像HTML5中的真实对象阴影一样，我们还可以使用HTML5属性，ShadowColor和ShadowBlur创建对象的阴影，其中ShadowColor属性定义阴影颜色。
阴影属性定义阴影的大小。
语法
context.shadowColor = "gray"; context.shadowBlur = 25; context.shadowOffsetX = 20; context.shadowOffsetY = 20;
日期：2020-04-11 23:04:10 来源：oir作者：oir