使用canvas绘制水滴（二次贝塞尔曲线、圆弧）

最新推荐文章于 2022-11-14 08:25:08 发布

书院二层楼

最新推荐文章于 2022-11-14 08:25:08 发布

阅读量1.5k

点赞数

分类专栏： canvas JS 文章标签： canvas

本文链接：https://blog.csdn.net/caoxinjian423/article/details/109495142

版权

JS 同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

canvas

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用canvas绘制水滴</title>
    <style>
        html{height: 100%;overflow: hidden}
        body{height: 100%;margin: 0;}
        #canvas{
            background: antiquewhite;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    //canvas充满窗口
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    //画笔
    const  ctx=canvas.getContext('2d');

    ctx.fillStyle='#00acec';

    /*
    三次贝塞尔曲线：bezierCurverTo(cpx1,cpy1,cpx2,cpy2,x,y)
    圆弧：arc(x,y,半径，开始弧度，结束弧度，方向)
    */

    //变换-位移
    // ctx.rotate(Math.PI/12);
    ctx.translate(100,200);


    //开始新路径
    ctx.beginPath();

    //指定起点，建立子路径
    ctx.moveTo(0,0);

    //绘制二次贝塞尔曲线
    ctx.quadraticCurveTo(50,-50,50,-100);

    //绘制圆弧
    ctx.arc(0,-100,50,0,Math.PI,true);

    //绘制二次贝塞尔曲线
    ctx.quadraticCurveTo(-50,-50,0,0);

    //显示路径
    // ctx.stroke();
    ctx.fill();


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