Javascript 有没有一种方法可以使这个动作以圆形代替正方形？_Javascript

Javascript 有没有一种方法可以使这个动作以圆形代替正方形？

javascript

Javascript 有没有一种方法可以使这个动作以圆形代替正方形？,javascript,Javascript,我只是在玩画布，我试着让它在一个圆圈里而不是在一个正方形里移动，这可能吗？如果是，怎么做这就是我到目前为止所拥有的，我不知道如何使它在一个圆圈中移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>derp</title> </head> <body> <canvas id="canvas" widt

我只是在玩画布，我试着让它在一个圆圈里而不是在一个正方形里移动，这可能吗？如果是，怎么做

这就是我到目前为止所拥有的，我不知道如何使它在一个圆圈中移动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>derp</title>
</head>
<body>

<canvas id="canvas" width="800" height="500" style="border:1px solid #d3d3d3;"></canvas>

<script type="text/javascript" language="JavaScript">
    var height = 500;
    var width = 800;
    var radius = 100;
    var x = 100;
    var y = 100;
    var xass = 0;

    function draw(){
        if(x == 100 && y == 100){
            xass = 0
        }
        if(x == 700 && y == 100){
            xass = 1
        }
        if(x == 700 && y == 400){
            xass = 2
        }
         if(x == 100 && y == 400){
            xass = 3
        }
        if( xass == 0){
            x++
        }
        else if(xass == 1){
            y++
        }
        else if(xass == 2){
            x--
        }
        else if(xass == 3){
            y--
        }

        var c = document.getElementById("canvas");
        var ctx = c.getContext("2d");

        ctx.clearRect(0, 0, 800, 500);
        ctx.beginPath();
        ctx.moveTo(400,250);
        ctx.lineTo(x,y);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(x,y,5,0,2*Math.PI);
        ctx.stroke();
        ctx.fill();
        ctx.beginPath();
        ctx.arc(400,250,15,0,2*Math.PI);
        ctx.stroke();
    }
</script>

<style>
    canvas {
           margin-left: auto;
           margin-right: auto;
           display: block;
    }
</style>
</body>
</html>


德普
var高度=500；
var宽度=800；
var半径=100；
var x=100；
变量y=100；
var-xass=0；
函数绘图（）{
如果（x==100&&y==100）{
xass=0
}
如果（x==700&&y==100）{
xass=1
}
如果（x==700&&y==400）{
xass=2
}
如果（x==100&&y==400）{
xass=3
}
如果（xass==0）{
x++
}
else if（xass==1）{
y++
}
else if（xass==2）{
x--
}
else if（xass==3）{
y--
}
var c=document.getElementById（“画布”）；
var ctx=c.getContext（“2d”）；
ctx.clearRect（0,080500）；
ctx.beginPath（）；
ctx.moveTo（400250）；
ctx.lineTo（x，y）；
ctx.stroke（）；
ctx.beginPath（）；
ctx.arc（x，y，5,0,2*Math.PI）；
ctx.stroke（）；
ctx.fill（）；
ctx.beginPath（）；
ctx.arc（400250,15,0,2*Math.PI）；
ctx.stroke（）；
}
帆布{
左边距：自动；
右边距：自动；
显示：块；
}

这会有帮助吗？

我刚刚使用了一个圆函数（数学）

这不是我的意思，但还是谢谢你的努力。我试着让它在一个大的圆圈里移动，它所做的就是让正方形旋转。注意：我没有找到解决方案-只是尝试改进问题；）

 // Create a rectangle shaped path with its top left point at
 // {x: 75, y: 75} and a size of {width: 75, height: 75}
var path = new Path.Rectangle({
point: [75, 75],
size: [75, 75],
strokeColor: 'black'
});

function onFrame(event) {
// Each frame, rotate the path by 3 degrees:
path.rotate(3);
 }

var height = 500;
var width = 800;
var radius = 150;
var x,y;

var step = 2*Math.PI/20;
var h = width/2; 
var k = height/2;

var theta = 0;

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

function draw(){
    theta += step
    x = h + radius*Math.cos(theta);
    y = k - radius*Math.sin(theta);

    ctx.clearRect(0, 0, 800, 500);
    ctx.beginPath();
    ctx.moveTo(400,250);
    ctx.lineTo(x,y);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(x,y,5,0,2*Math.PI);
    ctx.stroke();
    ctx.fill();
    ctx.beginPath();
    ctx.arc(400,250,15,0,2*Math.PI);
    ctx.stroke();
}

setInterval(draw,100);