HTML 画布 shadowBlur 属性


HTML 画布的 shadowBlur 属性用于设置阴影的模糊级别。默认值为 0。<canvas> 元素允许你在网页上使用 JavaScript 绘制图形。每个画布有两个元素描述画布的高度和宽度,即 height 和 width。

以下是语法 -

ctx.shadowBlur=num;

以上,num 代表阴影的模糊级别。

我们现在来看一个示例,实现画布的 shadowBlur 属性 -

示例

 在线演示

<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="600" height="350" style="border:2px solid orange;">
</canvas>
<script>
   var c = document.getElementById("newCanvas");
   var ctx = c.getContext("2d");
   ctx.shadowBlur = 20;
   ctx.shadowColor = "black";
   ctx.fillStyle = "green";
   ctx.fillRect(40, 40, 100, 250);
   ctx.shadowBlur = 30;
   ctx.shadowColor = "blue";
   ctx.fillStyle = "orange";
   ctx.fillRect(200, 40, 200, 150);
</script>
</body>
</html>

输出

更新于: 12-6-2020

150 次浏览

开启你的职业生涯

完成课程,获得证书

立即开始
广告
© . All rights reserved.