canvas 画半圆的两种方式

时间 2019-12-10

标签 canvas 半圆两种方式繁體版

原文原文链接

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <canvas id="mycanvas" class="mycanvas" width="462" height="462"></canvas>
</body>

<script>
    const x0 = 231 / 2 * 2 // 圆心坐标
    const y0 = 231 / 2 * 2 // 圆心坐标
    const r1 = (231 / 2 - 16) * 2 // 外圆半径
    const r2 = (231 / 2 - 25) * 2 // 内圆半径
    const startAng = 135 // 起始角度
    const endAng = 45 // 终点角度

    function getPointX(r, ao) {
        return x0 + r * Math.cos(ao * Math.PI / 180)

    }

    function getPointY(r, ao) {
        return y0 + r * Math.sin(ao * Math.PI / 180)
    }

    var canvas = document.getElementById('mycanvas');
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    // ctx.moveTo(231/2, 231/2)
    // ---------1 画大圆------------
    ctx.arc(x0, y0, r1, (Math.PI / 180) * startAng, (Math.PI / 180) * endAng, false);
    // ctx.lineCap = "round";
    // ctx.lineWidth = '32';
    ctx.strokeStyle = 'blue';
    ctx.stroke();






    // 获取大圆上的点 与 边界圆交点
    let x1 = this.getPointX(r1, startAng)
    let y1 = this.getPointY(r1, startAng)
    // 获取小圆上的点  与 边界圆交点
    let x2 = this.getPointX(r2, startAng)
    let y2 = this.getPointY(r2, startAng)
    // 边界圆上的圆心
    let x3 = (x2 - x1) / 2 + x1
    let y3 = (y1 - y2) / 2 + y2
    // 边界圆上的半径
    let r3 = (r1 - r2) / 2

    // ---------2 画小圆与校园两个边界的的左侧圆------------
    ctx.moveTo(x2, y2)
    ctx.arc(x3, y3, r3, (Math.PI/180)*315, (Math.PI/180)*startAng, false);
    ctx.stroke();

    // ---------3 画小圆-----------
    ctx.moveTo(x2, y2)
    ctx.arc(x0, y0, r2, (Math.PI/180)*startAng, (Math.PI/180)*endAng, false);
    ctx.stroke();


    // 获取大圆上的点 与 边界圆交点
    let xx1 = this.getPointX(r1, endAng)
    let yy1 = this.getPointY(r1, endAng)
    // 获取小圆上的点  与 边界圆交点
    let xx2 = this.getPointX(r2, endAng)
    let yy2 = this.getPointY(r2, endAng)
    // 边界圆上的圆心
    let xx3 = (xx1 - xx2) / 2 + xx2
    let yy3 = (yy1 - yy2) / 2 + y2
    // 边界圆上的半径
    let rr3 = (r1 - r2) / 2

    // ---------2 画小圆与校园两个边界的的左侧圆------------
    ctx.moveTo(xx1, yy1)
    ctx.arc(xx3, yy3, rr3, (Math.PI/180)*45, (Math.PI/180)*235, false);
    ctx.stroke();
    ctx.closePath()
    ctx.fillStyle="green";
   //  ctx.fill()

 
</script>

<style>
.mycanvas {
    width: 231px;
    height: 231px;
}
</style>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <canvas id="mycanvas" class="mycanvas" width="462" height="462"></canvas>
</body>

<script>
    const x0 = 231 / 2 * 2 // 圆心坐标
    const y0 = 231 / 2 * 2 // 圆心坐标
    const r1 = (231 / 2 - 16) * 2 // 外圆半径
    const r2 = (231 / 2 - 25) * 2 // 内圆半径
    const startAng = 135 // 起始角度
    const endAng = 45 // 终点角度
    var canvas = document.getElementById('mycanvas');
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    // ---------1 画大圆------------
    ctx.arc(x0, y0, r1, (Math.PI / 180) * startAng, (Math.PI / 180) * endAng, false);
    ctx.lineCap = "round";
    ctx.lineWidth = '32';
    ctx.strokeStyle = '#ebeff0';
    ctx.stroke();

    // 获取大圆上的点 与 边界圆交点
    let x1 = this.getPointX(r1, startAng)
    let y1 = this.getPointY(r1, startAng)

    ctx.moveTo(x1, y1)
    var temp = startAng
    window.requestAnimationFrame(() => {
        return this.animDraw(ctx, temp)
    });

    function drawColorArc(ctx, endAng) {
        ctx.beginPath();
        ctx.arc(x0, y0, r1, (Math.PI / 180) * startAng, (Math.PI / 180) * endAng, false);
        ctx.lineCap = "round";
        ctx.lineWidth = '32';
        ctx.strokeStyle = '#1dbdc4';
        ctx.stroke();
    }

    function animDraw(ctx, temp) {
        temp++
        if (temp < 270) {
            window.requestAnimationFrame(() => {
                return this.animDraw(ctx, temp)
            });
        }
        this.drawColorArc(ctx, temp)
    }

    function getPointX(r, ao) {
        return x0   +   r   *   Math.cos(ao   *  Math.PI   /180   ) 

    }
    function getPointY(r,ao) {
        return y0   +   r   *   Math.sin(ao   *   Math.PI  /180   )  
    }


</script>

<style>
    .mycanvas {
        width: 231px;
        height: 231px;
    }
</style>

</html>