疯狂讲义随笔——使用二次曲线quadraticCurveTo()画花朵

最新推荐文章于 2022-12-20 14:10:26 发布

霜月枫桥

最新推荐文章于 2022-12-20 14:10:26 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：疯狂HTML5+CSS3+JavaScript讲义随笔 HTML&HTML5

本文链接：https://blog.youkuaiyun.com/MOONCOM/article/details/78264853

HTML&HTML5 同时被 2 个专栏收录

18 篇文章

订阅专栏

疯狂HTML5+CSS3+JavaScript讲义随笔

5 篇文章

订阅专栏

本文介绍了一个使用HTML5 Canvas API绘制不同花瓣数量的花朵图案的方法。通过调整参数，可以在同一个画布上绘制多个具有不同特性的花朵。

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

代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .div1{
        height:400px;
        border:1px solid black;
        position:relative;
    }
    #canvas{
        margin:0px auto;
        border:1px solid black;
    }
    </style>
</head>
<body>
    <div class="div1">
        <canvas id="canvas" height="200" width="500"></canvas>
    </div>
    <script>
    var canvas=document.getElementById("canvas").getContext("2d");
    function createFlower(context,n,dx,dy,size,length){
        context.beginPath();
        context.moveTo(dx,dy+size);
        var dig=2*Math.PI/n;
        for(var i=1;i<n+1;i++){
            var ctrlX=Math.sin((i-0.5)*dig)*length+dx;
            var ctrlY=Math.cos((i-0.5)*dig)*length+dy;

            var x=Math.sin(i*dig)*size+dx;
            var y=Math.cos(i*dig)*size+dy;
            context.quadraticCurveTo(ctrlX,ctrlY,x,y);

        }
        context.closePath();
    }
    canvas.shadowBlur=4;
    canvas.shadowColor="gray";
    canvas.shadowOffsetX=6;
    canvas.shadowOffsetY=4;

    createFlower(canvas,5,70,100,30,80);
    canvas.fillStyle="#f00";
    canvas.fill();

    createFlower(canvas,6,200,100,30,80);
    canvas.fillStyle="#ff0";
    canvas.fill();

    createFlower(canvas,7,330,100,30,80);
    canvas.fillStyle="#f0f";
    canvas.fill();
    </script>
</body>
</html>

效果图如下所示：