为 Canvas 圆圈设置动画以在加载时绘制
Posted
技术标签:
【中文标题】为 Canvas 圆圈设置动画以在加载时绘制【英文标题】：Animate a Canvas circle to draw on load 【发布时间】：2013-03-19 12:16:48 【问题描述】：好的，你好。
我决定开始在我的一个小项目中使用 html 画布。
还没有真正的开始。我只是在学习 Canvas 的基础知识，我想制作一个圆圈的动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
body
margin: 0px;
padding: 0px;
background: #222;
</style>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<canvas id="myCanvas" ></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 1.5 * Math.PI;
var endAngle = 3.2 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = 'black';
context.stroke();
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js" type="text/javascript"></script>
</body>
</html>
这是我正在努力实现的目标http://jsfiddle.net/oskar/Aapn8/。 我不会对“反弹”效果大惊小怪。
但我基本上希望它在页面加载时绘制并停在所需的弧度角度 这是我迄今为止创建的 Fiddle。
http://jsfiddle.net/skerwin/uhVj6/
谢谢
【问题讨论】：
codepen.io/dcdev/pen/upjDy 【参考方案1】：Live Demo
// requestAnimationFrame Shim
(function()
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
)();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var endPercent = 85;
var curPerc = 0;
var counterClockwise = false;
var circ = Math.PI * 2;
var quart = Math.PI / 2;
context.lineWidth = 10;
context.strokeStyle = '#ad2323';
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 10;
context.shadowColor = '#656565';
function animate(current)
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
context.stroke();
curPerc++;
if (curPerc < endPercent)
requestAnimationFrame(function ()
animate(curPerc / 100)
);
animate();
基本上，我使用了您发布的演示链接中的相同公式。然后我添加了一个动画函数，调用该函数时会更新圆圈，直到达到所需的结束百分比。
requestAnimationFrame 不断调用动画，这是使用画布制作任何类型动画的首选方式。每次调用animate，当前百分比都会增加一，然后用于重绘圆弧。
【讨论】：
谢谢，你成功了……我的浏览器有一些问题：-[ 您的现场演示似乎没有任何更新？看起来一样 他忘了添加动画功能 我猜是因为我在我的 iPhone 上而不是在我的 IMac 上，所以它有点工作。我一会儿看看 @Blackline 我添加了 requestAnimationFrame 垫片，这可能是它不起作用的原因。试试jsfiddle.net/loktar/uhVj6/4，它甚至应该在那里工作。【参考方案2】：三个步骤：
1) Make an "init" function which will assign the variables (they aren't in any
function).
2) Then use requestAnimationFrame, or setInterval with your
drawing function you will create.
3) In this "drawing/updating" function you're going to
write your code to do the maths and then just animate the updated circle.
您的代码中没有任何函数。如果您不知道如何制作函数并使用它们+什么是全局变量，最好先阅读有关该内容的教程，但无论如何我会尝试为您举个例子:)
【讨论】：
好的。如果你能帮我做一些小提琴，那就太好了。我是一名刚刚进入 Canvas 的 HTML/CSS 开发人员。我隐约知道函数（来自 php）。 好的，我完成后会做小提琴:) 嗯...我不太了解 PHP，但我认为它一般般。画布使用 JavaScript 和 jQuery（类似于 JavaScript）...我希望我在 30 分钟内完成 :) 我尝试使用 jsfiddle 代码创建一个构造函数。有人可以解释为什么这不起作用jsfiddle.net/uhVj6/2803以上是关于为 Canvas 圆圈设置动画以在加载时绘制的主要内容，如果未能解决你的问题，请参考以下文章