- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我找到了一个绘制螺旋的代码,我需要让它旋转 360 度(类似于催眠效果)。我试图为它制作动画,但我不知道如何正确地实现它。我快没时间了。如果该代码尽可能简单,那就太好了。
这是螺旋代码:
<canvas id="myCanvas" width="300" height="300"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var centerX = 150;
var centerY = 150;
cxt.moveTo(centerX, centerY);
var STEPS_PER_ROTATION = 60;
var increment = 2*Math.PI/STEPS_PER_ROTATION;
var theta = increment;
while( theta < 40*Math.PI) {
var newX = centerX + theta * Math.cos(theta);
var newY = centerY + theta * Math.sin(theta);
cxt.lineTo(newX, newY);
theta = theta + increment;
}
cxt.stroke();
</script>
最佳答案
同时 Xotic750's answer好多了,因为没有不断发生的数学重新计算,here's the jsFiddle of a JavaScript-only alternative .此版本提供的优势是在没有 CSS3 animation support 的浏览器上向后兼容。 .
CSS3 动画支持最近才出现在 Firefox、Safari、Internet Explorer 和 Opera(桌面、移动和 Mini)中。 Chrome(桌面版和移动版)和黑莓浏览器是仅有的在很早的阶段就支持动画的浏览器。
解释:
var counter = 0;
setInterval(function () {
DrawSpiral(counter);
counter += 0.075;
}, 10);
counter
是一个变量,它将保持 count 螺旋在下一次重绘时应该位于的位置。DrawSpiral
是执行实际工作的函数。有两个因素可以帮助改变旋转速度; counter
(+= 0.075
) 和 setInterval
延迟 (50
) 的变化。
这两个因素应该是成反比的。换句话说,增加 setInterval
延迟应该与减少计数器变化齐头并进。
与原来相比的变化:
cxt.save();
cxt.clearRect(0, 0, c.width, c.height);
cxt.beginPath();
DrawSpiral(...)
函数中。cxt.save()
存储当前的转换。cxt.clearRect(...)
清除 Canvas (以免在之前的绘图之上绘制)。cxt.beginPath()
开始一个新的行路径(本质上是切断上一个路径)。下一组更改:
var newX = centerX + theta * Math.cos(theta - mod);
var newY = centerY + theta * Math.sin(theta - mod);
... Math.cos(theta - mod)
将 newX
值更改为下一个“spot”。... Math.sin(theta - mod)
将 newY
值更改为下一个“spot”。请记住,此方法可能会稍微慢一些,具体取决于浏览器、CPU、显卡等。
关于javascript - 制作旋转螺旋,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16286900/
我正在尝试创建一个结构,如下面的屏幕截图所示。有没有办法在 JavaScript 中为此构建一个算法,以按时间顺序获取每个红点的 X 和 Y 坐标,以根据特定数量生成无限螺旋? Screenshot
我在 C++ 中有如下代码: for(int x = position.x; x GetValue(tc); } } 它的作用是生成一个梯度噪声值容器。在这样做的同时,它还会使结果围绕震中螺旋
这个问题不太可能帮助任何 future 的访问者;它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关,这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用,visit
我是一名优秀的程序员,十分优秀!