- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
FIDDLE
我正在做什么:我使用设定的间隔从圆弧中绘制出圆弧。绘制完一个圆之后,我正在绘制另一个圆度稍大的圆,如小提琴所示。
我想做的事情:我想实现相同的功能,但是应该使用requestAnimationFrame并避免setInterval在1分钟(即60秒绘制一个圆)上完成一个圆。
我知道什么是皇家空军,但无法实施
60秒...皇家空军...圈子。
我的代码:
//for full code see the fiddle.
setInterval(function () {
context.save();
//context.clearRect(0, 0, 500, 400);
context.beginPath();
increase_end_angle = increase_end_angle + 11 / 500;
dynamic_end_angle = end_angle + increase_end_angle;
context.arc(x, y, radius, start_angle, dynamic_end_angle, false);
context.lineWidth = 6;
context.lineCap = "round";
context.stroke();
context.restore();
if (dynamic_end_angle > 3.5 * Math.PI) { //condition for if circle completion
increase_end_angle = 0;
draw(radius + 10); //draw from same origin.
}
}, 3);
最佳答案
要制作将使用1分钟绘制一个圆的动画,无需使用rAF,因为这会产生额外的负载,即使我个人建议在大多数情况下使用rAF。
但是,在这样的情况下,监视器同步不是很关键的setInterval
(和setTimeout
)在负载方面可能是更好的选择。
这是修改后的代码,每分钟绘制一个圆圈。它基于实际时间戳,因此计时非常准确。此处的间隔设置为120 ms,但这实际上应与圆的周长有关,因为这将确定在该时间范围内要绘制多少像素,因为重叠的像素将不可见(此处忽略子像素)。随时根据需要调整超时时间。
Modified fiddle here
现在的设置如下(在小提琴上不需要window.onload,所以我将其删除了,但是如果将脚本加载到最后一页的标头中,则当然需要放回它)。 var名称可能更好,但我保留了一些原始名称:
start_angle = 1.5 * Math.PI, /// common offset (north)
end_angle = 2 * Math.PI, /// ends full circle in radians
increase_end_angle = 0, /// current angle incl. offset
radius = 50,
startTime = (new Date()).getTime(), /// get current timestamp
diff; /// used for timestamp diff
save
/
restore
,因为在循环外我们不需要更改其他地方需要的许多变量:
context.lineWidth = 6;
context.lineCap = "round";
setInterval(anim, 120); /// 120 for demo, use Ø and time to find optimal timeout
function anim() {
/// calc difference between initial and current timestamp
diff = (new Date()).getTime() - startTime;
diff = diff / 60000; /// 60000ms = 60s, now we have [0, 1] fractions
/// final angle
increase_end_angle = start_angle + end_angle * diff;
/// draw circle
context.beginPath();
context.arc(x, y, radius, start_angle, increase_end_angle);
context.stroke();
/// check diff fraction
if (diff >= 1) { /// if diff >= 1 we have passed 1 minute
/// update time and new radius
startTime = (new Date()).getTime();
radius += 10; /// add to current radius
};
}
canvas.width = wantedWidth * 2;
canvas.height = wantedHeight * 2;
canvas.style.width = wantedWidth + 'px'
canvas.style.height = wantedHeight + 'px';
setInterval
和
setTimeout
无法同步到显示器的VBLANK。当扫描内部显示屏的光束开始出现新的帧时,VBLANK来自旧的CRT电视。要正确同步,请同步到VBLANK间隙。这适用于与视频相关的所有设备,包括视频。电脑。
requestAnimationFrame
),它可以同步到显示器的刷新率,但不仅是因为这个原因。它更底层,更高效,因此也可以减少功耗。
setInterval
对于每个SE来说还不错,但是对于动画来说,在需要不断更新的地方通常太不准确了。它要做的是创建一个事件并将其放入浏览器的事件队列中。只要有可能,事件就会在它超时的时间执行(队列包含许多事件,例如重绘,函数调用等)。这里不是超级准确,但足够精确,因为我们不依赖于超时时间,而是使用更新弧线时的实际时间。因此,为此目的,当我们以很小的增量进行绘制时,将可以掩盖细微的错误。
"Now time" - "Start time"
的差。在这种情况下,这将相差60,000毫秒,因为我们每轮使用60秒。因此,要得到一个有用的数字,我们要除以60000,这样我们得到的数字就在0.0到1.0之间,当diff为1时,我们可以直接与该角度相乘以获得100%的角度。
关于javascript - 用requestAnimationFrame绘制弧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18037177/
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 9 年前。 Improve this q
半径为r的圆上的点p(x,y)与圆心O(x0,y0)的关系: x = x0+rcosA; y = y0+rsinA ,A为弧度 1、圆 复制代码 代码如下:
我正在尝试找到一种方法来计算两条弧线之间的交点。我需要用它来确定在视觉上圆弧的右半边有多少,左边有多少。我考虑创建右半部分的弧线,并将其与实际弧线相交。但是我花了很多时间来解决这个问题,所以我想在这里
这听起来可能是一个新手问题,但我是 iOS 开发新手。 我在我的项目中跟踪了代码,该项目启用了 ARC,但我在执行时遇到错误(访问错误),并且想了解问题的原因并解决它。 按下某些按钮后,将在 MTCl
我想使用圆弧连接两个 SVG 点(例如两个圆的中心)。如果只有一个连接,则线 ( ) 将是一条直线。如果有两个连接,则两者都将是圆形的并且是对称的,这样: 所以,事实上,有一些规则: 一切都应该与连
我正在尝试实现多级饼图 我的初始代码在这里:JSFIDDLE var departments = [ { "name": "Sales", "color": "green",
我想在我的布局中制作一个弧形 View ,我尝试使用一个库但它不能正常工作,我如何制作这样的拱形 View 并在其上附加一个按钮,例如: 我尝试了一些代码,但它们在平板电脑和不同尺寸的屏幕上无法正常显
我有点 X 和 A, A',... 坐标: X [x,y](是起点) A [a,b], A'[a',b']等(是终点) 我还知道 Angular XCA、XCA'等 我找不到计算弧的公式,类似于图片上
我有一个 ViewController,它从 CoreData 获取对象并用它们构建一个 UITableView。当用户按下一行时,我得到报告文学对象并使用以下方法将其传递给下一个 View Cont
我有一个带有弧形的 Canvas ,里面有一些标签。 这是 fiddle 链接 - Fiddle下面是代码: var canvas = document.getElementById("myC
如何使用 css 创建这样的 Angular 弧? 这是入门模板:https://codepen.io/anon/pen/rwraXG 我希望我能够使用黑色外部 div 和红色内部 div,并使用边框
只是想完全理解 ARC。 MyView *testView = [[MyView alloc] init]; __weak MyView *weakView = testView; [weakView
假设我有一条线,我想为这条线设置动画,首先线是隐藏的,经过一点一点的线出现并完成后,我的问题是在 Android 中可以做到这一点还是我必须使用 Adobe After Effect? 更新 :
更新:2013 年 11 月 20 日:此问题仍未解决。 我正在尝试在自定义 View 中以动画方式创建圆圈。我想制作圆周的动画 - 在动画开始时有一个圆弧,在动画结束时圆是完整的。 我按照这个答案成
This is a basic code to create a pie chart for protocol distribution. In my .csv file, I have two co
我有一个 NSArray 对象,在我的 UIViewController 中使用。我可以将其声明为 ivar 或属性。这两种方法都有什么优点(考虑到我使用的是 ARC)? 选项 1: @interfa
此刻 Canvas 以不同的速度和大小绘制 15 个从 ltr 移动的圆圈。当其中一个离开窗口时,它将被设置为开始。问题是 Canvas 在圆圈之间画线,我不知道为什么?有人可以帮忙吗? window
我最近在这里和其他网站上阅读了很多关于 IBOutlets 应该强还是弱的文章。官方判定它们应该是弱的,除非它们引用顶级 xib 对象。 这很好。 然而,我还不清楚为什么将它们设置为强或弱实际上会对应
我有一个 CIImage,我正试图在鼠标沿路径拖动时画线。我可以这样做吗? 我正在为 mac 构建一个应用程序,我是 Core Image 的新手。 最佳答案 您需要先创建一个图形上下文,然后从中检索
我有一个使用 CAShapeLayer 绘制的圆弧,我希望它围绕圆的中心旋转。我正在尝试使用“transform.rotation”属性上的 CABasicAnimation 来获取此动画。但是旋转似
我是一名优秀的程序员,十分优秀!