HTML5 给图形绘制阴影(绘制五角星示例)

最新推荐文章于 2024-08-12 20:32:17 发布

weixin_30466421

最新推荐文章于 2024-08-12 20:32:17 发布

阅读量425

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/huyuzhu/p/6514722.html

本文介绍如何使用HTML5 Canvas API中的阴影属性（shadowOffsetX、shadowOffsetY、shadowColor、shadowBlur）来绘制带有阴影效果的五角星。通过设置这些属性，可以调整阴影的位置、颜色及模糊程度。

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

几个属性

shadowOffsetX:阴影的横向位移量。
shadowOffsetY:阴影的纵向位移量。
shadowColor:阴影的颜色。
shadowBlur:阴影的模糊范围。

属性说明

shadowOffsetX，shadowOffsetY默认值为零
shadowBlur属性是可选的。如果你不希望阴影的边缘太清晰，需要将阴影的边缘模糊化时使用该属性。设定该属性值时必须设定为比零大的数字，否则将被忽略。一般设定在0-10之间。

例：绘制五角星

<!DOCTYPE html>
<html>
<head>
    <title>给图形绘制阴影</title>
    <script type="text/javascript">
function draw(id) {
    var canvas = document.getElementById(id);
    if(canvas == null)
        return false;
    var context = canvas.getContext('2d');
    context.fillStyle = "#eeeeff";
    context.fillRect(0,0,400,300);
    context.shadowOffsetX = 10;
    context.shadowOffsetY = 10;
    context.shadowColor = 'rgba(100,100,100,0.5)';
    context.shadowBlur = 7.5;
    //图形绘制
    context.translate(0,0);
    for (var i = 0; i < 3; i++) {
        context.translate(60,50);//偏的方向
        creat5Star(context);
        context.fill();
    };
}
function creat5Star(context) {
    var n = 0;
    var dx = 0;
    var dy = 0;
    var s = 50;
    //创建路径
    context.beginPath();
    context.fillStyle = 'rgba(255,0,0,0.5)';
    var x = Math.sin(0);
    var y = Math.cos(0);
    var dig = Math.PI/5*4;//改变形状
    for (var i = 0; i < 5; i++) {
        var x = Math.sin(i*dig);
        var y = Math.cos(i*dig);
        context.lineTo(dx+x*s,dy+y*s);
    };
    context.closePath();
}   </script>


</head>
<body onload="draw('canvas');">
    <h1>canvas元素示例</h1>
    <canvas id="canvas" width="400" height="300"></canvas>    
</body>

</html>

转载于:https://www.cnblogs.com/huyuzhu/p/6514722.html