使用canvas实现阴影效果

最新推荐文章于 2024-08-14 17:45:12 发布

zzm_

最新推荐文章于 2024-08-14 17:45:12 发布

阅读量372

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/3759656/blog/2247234

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>阴影</title>
   <style>
       canvas{
           border:1px solid red;
       }
   </style>
   <script>
       window.onload = function(){
           var canvas = document.getElementById('canvas');
           var context = canvas.getContext('2d');
           context.fillStyle = 'red';
           // 添加阴影
           // X和Y轴的阴影偏移
           context.shadowOffsetX = -5;
           context.shadowOffsetY = -5;
           // 阴影颜色
           context.shadowColor = 'blue';
           // 阴影模糊距离
           context.shadowBlur = 5;
           context.fillRect(100,100,200,200);
           context.fillRect(300,300,50,50);
       }
   </script>
</head>
<body>
   <canvas id="canvas" width="400px" height="400px"></canvas>
</body>
</html>