动画画布圆圈以在载入时绘制 [英] Animate a Canvas circle to draw on load
问题描述
好的，您好。
我决定开始使用HTML画布做一个小项目。
I've decided to start using HTML canvas for a small project I have.
还没有真正的开始。我只是学习Canvas的基础知识，我想Animate一个圆
There's no real start yet. I'm just learning the basics of Canvas and I want to Animate a circle
<!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" width="578" height="250"></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/ 我想要实现的。
我不想用Bounce效果。
Here is a fiddle http://jsfiddle.net/oskar/Aapn8/ of what I'm trying to achieve. I'm not to fussed with the "Bounce" effect.
但是我基本上想让它在页面加载时绘制，并在所需的角度Arc
这是迄今为止我创建的Fiddle。
But i basically want it to Draw on page load and stop at the desired Angle of the Arc Here's the Fiddle of what I've created so far.
http://jsfiddle.net/skerwin/uhVj6/
感谢
推荐答案
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();
基本上我使用了你发布的演示链接中的相同公式。然后我添加了一个动画函数，当被调用时会更新该圆，直到达到所需的结束百分比。
Basically I used the same formula from the demo link you posted. I then added an animation function that when called will update the circle until it reaches the desired ending percent.
动画不断被requestAnimationFrame 这是使用canvas进行任何类型动画的首选方式。每次 animate 被称为当前百分比增加一，然后用于重绘弧。
The animation is continually called by requestAnimationFrame this is the preferred way of doing any kind of animations with canvas. Every time animate is called the current percent is increased by one, which is then used to redraw the arc.
这篇关于动画画布圆圈以在载入时绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
