画布，使用正弦波沿着方形路径制作形状
[英]Canvas, animate a shape along square path using sine wave
问题描述
I'm trying to make a simple shape animate along a square path based on a set 'radius'. 
我正在尝试根据设置的“半径”在方形路径上制作一个简单的形状动画。 Atm I'm using a sine wave to set the position over time, so its basically animating along a circular path. Atm我正在使用正弦波来设置位置随着时间的推移，所以它基本上沿着圆形路径动画。 Is there a way using maths to alter the sine wave to make the animation square. 有没有办法使用数学来改变正弦波，使动画成为正方形。 I know there are other ways to do this, but I'd be interested to learn the math behind it. 我知道还有其他方法可以做到这一点，但我有兴趣了解它背后的数学。
I have an example fiddle: 我有一个例子小提琴：
t = new Date().getTime()
r = 25
x = (r * Math.cos t * 0.005)
y = (r * Math.sin t * 0.005)
3 个解决方案
解决方案1
1 2016-10-26 15:14:20
We can do better than just circle or square! 我们可以做的不仅仅是圆形或方形！ The equations for x and y can be generalized with an exponent D: x和y的方程可以用指数D推广：
x = (r^D * cos(theta))^(1/D) and y = (r^D * sin(theta))^(1/D)
When D = 1 you have the familiar equations that give a circle. 当D = 1时，你有熟悉的方程式给出一个圆。 When D = 0.5 you get a diamond, when D < 0.5 you get pointed stars. 当D = 0.5时，你得到一颗钻石，当D <0.5时你会得到尖角星。 When D > 1 you get increasingly blocky shapes, and as D -> infinity you get a square. 当D> 1时，你会得到越来越多的块状形状，而D - >无穷大就会得到一个正方形。 Give it a try with this snippet; 尝试使用此代码段; you can type new values of D as the animation proceeds. 您可以在动画进行时键入D的新值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>animation problem</title>
<script type='text/javascript'>
function demo(){
var w = 400;
var ctx = document.getElementById("canvas").getContext("2d");
ctx.canvas.width = w;
ctx.canvas.height = w;
var r = w/4;
var theta = 0;
setInterval(function(){
ctx.canvas.width += 0; // clear the canvas
ctx.translate(w/2, w/2); // center it on (0,0)
var D = +document.getElementById("exponent").value;
var xSign = Math.cos(theta) < 0 ? -1 : 1; // Handle all quadrants this way
var ySign = Math.sin(theta) < 0 ? -1 : 1;
var x = xSign*Math.pow( Math.pow(r, D)*Math.abs(Math.cos(theta)), 1/D );
var y = ySign*Math.pow( Math.pow(r, D)*Math.abs(Math.sin(theta)), 1/D );
ctx.fillStyle = "blue";
ctx.arc( x, y, 20, 0, 6.2832, false );
ctx.fill();
theta += Math.PI/100;
}, 20);
}
</script>
</head>
<body onload='demo()'>
<input id='exponent' type=text value='1'\>
<br />
<canvas id='canvas'></canvas>
</body>
</html>
解决方案2
0 2014-06-06 16:16:22
It actually isn't going to take much modification. 它实际上不需要做太多修改。 Considering that the cosine represents the x coordinate, and the sin represents the y coordinate, it should be obvious that to make a square path one of these values must be set to a whole value instead of a partial value. 考虑到余弦表示x坐标，sin表示y坐标，显然，要制作方形路径，必须将其中一个值设置为整数值而不是部分值。
As a result, Math.cos t and Math.sin t will need to be regulated with a variable and a condition 因此，Math.cos t和Math.sin t需要使用变量和条件进行调节
xcos = Math.cos t * 0.005
ysin = Math.sin t * 0.005
if Math.abs(xcos) > Math.abs(ysin)
xcos = Math.round(xcos)
else
ysin = Math.round(ysin)
x = @cx + (radius * xcos)
y = @cy + (radius * ysin)
解决方案3
0 2014-06-06 16:19:48
Your variable r should be a vector of two position (x,y) that will handle the position/increment on x and y respectively. 你的变量r应该是两个位置（x，y）的向量，它将分别处理x和y上的位置/增量。 See when you do this x = (0 * Math.cos t * 0.005) the circule just get moved from up to down. 看你何时这样做x =（0 * Math.cos t * 0.005），圆圈刚从上到下移动。 In order to get a shape behavior you need to control the vector (x and y positions) over the time and use remainder to wrap up x and y position (%). 为了获得形状行为，您需要控制时间上的向量（x和y位置）并使用余数来包装x和y位置（％）。
Regards. 问候。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.