关于阴影有如下的几个属性
- context.shadowOffsetX
- context.shadowOffsetY
- context.shadowBlur
其中blur的英文解释为模糊不清的，在canvas中填写一个数值即可
如下例子
程序运行截图如下：
源码如下：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
-
- <canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
- 当前浏览器不支持canvas
- </canvas>
-
- <script>
-
- window.onload = function(){
-
- let canvas = document.getElementById("canvas");
- canvas.width = 800;
- canvas.height = 800;
- let context = canvas.getContext("https://cdn.jxasp.com:9143/image/2d");
-
- context.shadowColor = "gray";
- context.shadowOffsetX = 20;
- context.shadowOffsetY = 20;
- context.shadowBlur = 5;
-
- context.fillRect(200, 200, 400, 400);
- }
-
- </script>
-
- </body>
- </html>
把参数换成这样的：
- <script>
-
- window.onload = function(){
-
- let canvas = document.getElementById("canvas");
- canvas.width = 800;
- canvas.height = 800;
- let context = canvas.getContext("https://cdn.jxasp.com:9143/image/2d");
-
- context.shadowColor = "gray";
- context.shadowOffsetX = -50;
- context.shadowOffsetY = -50;
- context.shadowBlur = 50;
-
- context.fillRect(200, 200, 400, 400);
- }
-
- </script>
运行截图如下：
