绘制带阴影的图形

365天的坚持

于 2023-03-27 00:01:55 发布

阅读量91

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/liying_xiaozhan/article/details/129787017

版权

这段代码示例展示了如何使用HTML5canvas元素和JavaScript来绘制一个带有红色阴影的蓝色矩形。通过设置shadowOffsetX,shadowOffsetY,shadowBlur和shadowColor属性，可以控制阴影的位置、模糊度和颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制带阴影的图形</title>
</head>
<body>
<canvas id="my_canvas" width="200" height="200" style="border:1px solid #ff0000">

</canvas>
<script type="text/javascript">
    var elem=document.getElementById("my_canvas");
    if (elem && elem.getContext) {
    var context=elem.getContext('2d');
    context.shadowOffsetX=15;
    context.shadowOffsetY=15;
    context.shadowBlur=10;
    context.shadowColor='red';
    context.fillStyle='blue';
    context.fillRect(20,20,150,100);

    }
</script>
</body>
</html>