个人中心
gpt4 book ai didi

javascript - 无法使用 Canvas 以特定度数围绕圆圈旋转箭头

转载 作者：行者123 更新时间：2023-11-29 23:54:12 25 4
gpt4 key购买 nike

我有一个 Canvas ，我在上面创建了两个圆圈。我面临的问题是，如果我将改变内圆箭头的度数，然后外箭头也从它们的位置旋转，那么两个箭头都依赖于另一个箭头。我只想要两个圆及其相互独立的对应箭头。 enter image description here 

<!DOCTYPE html>
<html>
<head>
<style>
    body{
        background: #666;
    }
    #canvas1{
        background: blue;
    }
</style>
<script>
function start(){
    start1();
    start2();
}



function start1() {   // inner circle
    var ctx = document.getElementById("canvas1").getContext("2d");

    var cx = 200;
    var cy = 200;
    var radius = 100;

    ctx.beginPath();  // inner circle creation
    ctx.arc(cx, cy, radius, 0, Math.PI * 2);
    ctx.stroke();

        var e = xy1(cx, cy, radius, 0 *(Math.PI/180));  //
        ctx.fillStyle = "#000000"
        ctx.translate(cx,cy);
        ctx.rotate(0 * (Math.PI/180));  // for arrow rotation
        ctx.translate(-cx,-cy);
        ctx.save();
        ctx.beginPath();  // generate inner arrow
        ctx.moveTo(e.x,e.y);
        ctx.lineTo(e.x + 0 ,e.y + 10);
        ctx.lineTo(e.x + 60 ,e.y + 10);
        ctx.lineTo(e.x + 60 ,e.y + 20);
        ctx.lineTo(e.x + 75 ,e.y + 0);
        ctx.lineTo(e.x + 60 ,e.y - 20);
        ctx.lineTo(e.x + 60 ,e.y - 10);
        ctx.lineTo(e.x + 0 ,e.y - 10);
        ctx.closePath();
        ctx.fill();
        ctx.restore();



}


function start2(){   // outer circle
    var ctx1 = document.getElementById("canvas1").getContext("2d");

    var cx2 = 200;
    var cy2 = 200;
    var radius2 = 120;

    ctx1.beginPath(); // outer circle creation
    ctx1.arc(cx2, cy2, radius2, 0, Math.PI * 2);
    ctx1.stroke();


        var f = xy2(cx2, cy2, radius2, 0 *(Math.PI/180));
        ctx1.fillStyle = "#000000"
        ctx1.translate(cx2,cy2);
        ctx1.rotate(90 * (Math.PI/180)); // for arrow rotation
        ctx1.translate(-cx2,-cy2);
        ctx1.save();
        ctx1.beginPath(); // generate arrow
        ctx1.moveTo(f.x2,f.y);
        ctx1.lineTo(f.x2 + 0 ,f.y2 + 10);
        ctx1.lineTo(f.x2 + 60 ,f.y2 + 10);
        ctx1.lineTo(f.x2 + 60 ,f.y2 + 20);
        ctx1.lineTo(f.x2 + 75 ,f.y2 + 0);
        ctx1.lineTo(f.x2 + 60 ,f.y2 - 20);
        ctx1.lineTo(f.x2 + 60 ,f.y2 - 10);
        ctx1.lineTo(f.x2 + 0 ,f.y2 - 10);
        ctx1.closePath();
        ctx1.stroke();
        ctx1.restore();
}
function xy1(cx, cy, radius, radianAngle) {  // for inner circle
        var x = cx + radius * Math.cos(radianAngle);
        var y = cy + radius * Math.sin(radianAngle);
        return ({
            x: x,
            y: y
        });
    }
function xy2(cx2, cy2, radius2, radianAngle2) { // for outer circle
        var x2 = cx2 + radius2 * Math.cos(radianAngle2);
        var y2 = cy2 + radius2 * Math.sin(radianAngle2);
        return ({
            x2: x2,
            y2: y2
        });
    }

window.onload=start;
</script>


</head>

<body>
  <canvas id="canvas1" width=400 height=400></canvas>

</body>

</html>

最佳答案

您根本没有在旋转之前保存您的上下文。在应用任何转换之前已经保存。

    ctx1.save();    //save first
    ctx1.translate(cx2,cy2);
    ctx1.rotate(90 * (Math.PI/180)); // for arrow rotation
    ctx1.translate(-cx2,-cy2);

    ctx1.beginPath(); // generate arrow
    ctx1.moveTo(f.x2,f.y);
    ctx1.lineTo(f.x2 + 0 ,f.y2 + 10);
    ctx1.lineTo(f.x2 + 60 ,f.y2 + 10);
    ctx1.lineTo(f.x2 + 60 ,f.y2 + 20);
    ctx1.lineTo(f.x2 + 75 ,f.y2 + 0);
    ctx1.lineTo(f.x2 + 60 ,f.y2 - 20);
    ctx1.lineTo(f.x2 + 60 ,f.y2 - 10);
    ctx1.lineTo(f.x2 + 0 ,f.y2 - 10);
    ctx1.closePath();
    ctx1.stroke();
    ctx1.restore();     //and restore in the end (as you already did)

关于javascript - 无法使用 Canvas 以特定度数围绕圆圈旋转箭头，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42088962/

25 4 0
文章推荐： android - 运行时权限 - 为已授予的权限请求权限
文章推荐： php - UTF-8贯穿始终
文章推荐： php - 最多 24 小时更新数据库
文章推荐： mysql - 优化 "JOIN"查询
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com