如何利用canvas绘制一个三分园

最新推荐文章于 2024-05-15 20:43:52 发布

llsr_k

最新推荐文章于 2024-05-15 20:43:52 发布

阅读量239

点赞数

分类专栏： canvas 文章标签： canvas javascript 前端开发

本文链接：https://blog.csdn.net/llsr_k/article/details/78782808

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>
<canvas id="canvas" width="800" height="600" style="border:1px solid red"></canvas>
</body>
<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.fillStyle='#00A2E8';
    ctx.moveTo(300,300);
    //1、将圆心的位置和圆弧的起点连成直线
    ctx.arc(300,300,150,5*Math.PI/3,Math.PI/6);
    //2、fill方法自动闭合路径，会将圆弧的终点和圆心的位置连成一条直线
    ctx.fill();

    ctx.beginPath();//会开辟新路径：不会记忆上一次绘制的终点
    ctx.fillStyle="#3F48CC";
    ctx.moveTo(300,300);
    ctx.arc(300,300,150,Math.PI/6,5*Math.PI/6);
    ctx.fill();

    ctx.beginPath();//会开辟新路径：不会记忆上一次绘制的终点
    ctx.fillStyle="#22B14C";
    ctx.moveTo(300,300);
    ctx.arc(300,300,150,5*Math.PI/6,5*Math.PI/3);
    ctx.fill();


    function draw(circleX,circleY,radius,startRadian,endRadian,color){
        ctx.beginPath();//会开辟新路径：不会记忆上一次绘制的终点
        ctx.fillStyle=color;
        ctx.moveTo(circleX,circleY);
        ctx.arc(circleX,circleY,radius,startRadian,endRadian);
        ctx.fill();
    }
</script>
</html>

llsr_k

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何利用canvas绘制一个三分园

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>$Title$</title></head><body><canvas id="canvas" width="800" height="600" style="border:1px solid red"></canvas></body>
复制链接

扫一扫