标签：200 canvas 椭圆 ctx 标识 90 PI Math

效果图：

 代码如下：

<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>

标签：200,canvas,椭圆,ctx,标识,90,PI,Math
来源： https://blog.51cto.com/u_15201483/2794275

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。