使用canvas画椭圆，并标识椭圆上的点

Posted 2021-05-18 尖子

 

效果图：

 

 代码如下：

<canvas id="canvas" width="800" height="400" style="background-color: cornflowerblue;">
</canvas>
<script>
    let red = new Image();
    let ye = new Image();
    red.src = "re.png";
    ye.src = "ye.png";
    var canvas = document.getElementById(\'canvas\');
    var ctx = canvas.getContext(\'2d\');
    red.onload = function () {
        let point = getCPoint(400, 200, 150, 390, 135)
        ctx.drawImage(red, point.x, point.y, 54, 54);
    }
    ye.onload = function () {
        ctx.drawImage(ye, 330, 110, 54, 54);
    }
    draw()
    function draw() {
        var canvas = document.getElementById(\'canvas\');
        var ctx = canvas.getContext(\'2d\');

        ctx.beginPath();
        ctx.ellipse(400, 200, 50, 100, 90 * Math.PI / 180, 0, 2 * Math.PI); //倾斜90°角
        ctx.stroke();


        ctx.beginPath();
        ctx.ellipse(400, 200, 100, 250, 90 * Math.PI / 180, 0, 2 * Math.PI); //倾斜90°角
        ctx.stroke();
        ctx.beginPath();
        ctx.ellipse(400, 200, 150, 390, 90 * Math.PI / 180, 0, 2 * Math.PI); //倾斜90°角
        ctx.strokeStyle = "#0000ff";
        ctx.stroke();


        ctx.font = "30px Arial";
        ctx.fillStyle = "#FF0000";
        ctx.fillText("核心层", 350, 210);
        ctx.fillText("汇聚层", 200, 210);
        ctx.fillText("接入层", 40, 210);

    }

    // cx, cy 圆心,  b 短半径，a 长半径，  p 角度 ，
    function getCPoint(cx = 0, cy = 0, b, a, p = 1) {
        let x = a * Math.cos(Math.PI * 2 * p / 360);
        let y = b * Math.sin(Math.PI * 2 * p / 360);
        return { x: x + cx, y: y + cy }
    }
    // console.log(getCPoint(400, 200, 50, 100, 0))
</script>