我正在尝试加快 Canvas 标签的速度，但在涉及基本动画时我遇到了困难。我四处搜索，我可以获得我发现的大部分教程，但我在将其转化为我想要做的事情时遇到了一些麻烦。
我有一个正在为我的投资组合构建的条形图，我希望能够为图表上的条形设置动画。基本上当页面加载时，条形图从图表的底部开始，向上增长到它们需要的位置。我有一个我在 jquery 中构建的版本，可以在这里找到我想要的东西:http://jokedesigns.com/portfoliov6/
有人可以为我指出正确的方向，告诉我如何实现我正在寻找的动画吗？即使它是一个简单的功能，我也应该能够将其重新设计成我需要的。我发现的大多数教程主要涉及旋转，我确实找到了一个线性动画，但我仍然无法将其完全改造成我需要的。
这是我目前为图表编写的代码:
<html>
<head>
<script type="application/javascript">
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
function draw() {
var canvas = document.getElementById("canvas");
var canvasbg = document.getElementById("canvasbg");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
var ctx2 = canvasbg.getContext("2d");
var img = new Image();
img.onload = function(){
ctx2.drawImage(img,0,0);
};
img.src = 'skills_bg.jpg';
ctx.fillStyle = "#0a4888";
ctx.fillRect (0, 82, 34, 50);
ctx.fillStyle = "#ed9323";
ctx.fillRect (60, 82, 34, 50);
ctx.fillStyle = "#87982d";
ctx.fillRect (120, 82, 34, 50);
ctx.fillStyle = "#902e63";
ctx.fillRect (180, 82, 34, 50);
ctx.fillStyle = "#262627";
ctx.fillRect (360, 82, 34, 50);
ctx.fillStyle = "#262627";
ctx.fillRect (420, 82, 34, 50);
ctx.fillStyle = "#262627";
ctx.fillRect (480, 82, 34, 50);
ctx.fillStyle = "#262627";
ctx.fillRect (540, 82, 34, 50);
ctx.fillStyle = "#262627";
ctx.fillRect (600, 82, 34, 50);
ctx.fillStyle = "#262627";
ctx.fillRect (660, 82, 34, 50);
ctx.fillStyle = "#262627";
ctx.fillRect (720, 82, 34, 50);
ctx.fillStyle = "#262627";
ctx.fillRect (780, 82, 34, 50);
ctx.fillStyle = "#262627";
ctx.fillRect (840, 82, 34, 50);
var sources = {
ps: 'icn_ps.png',
ai: 'icn_ai.png',
dw: 'icn_dw.png',
id: 'icn_id.png',
ht: 'icn_html.png',
cs: 'icn_css.png',
js: 'icn_js.png',
sql: 'icn_mysql.png',
php: 'icn_php.png',
perl: 'icn_perl.png',
ruby: 'icn_ruby.png',
cplus: 'icn_cplusplus.png',
asp: 'icn_asp.png'
};
loadImages(sources, function(images) {
ctx.drawImage(images.ps, 0, 132, 36, 37);
ctx.drawImage(images.ai, 60, 132, 36, 37);
ctx.drawImage(images.dw, 120, 132, 36, 37);
ctx.drawImage(images.id, 180, 132, 36, 37);
ctx.drawImage(images.ht, 360, 132, 36, 37);
ctx.drawImage(images.cs, 420, 132, 36, 37);
ctx.drawImage(images.js, 480, 132, 36, 37);
ctx.drawImage(images.sql, 540, 132, 36, 37);
ctx.drawImage(images.php, 600, 132, 36, 37);
ctx.drawImage(images.perl, 660, 132, 36, 37);
ctx.drawImage(images.ruby, 720, 132, 36, 37);
ctx.drawImage(images.cplus, 780, 132, 36, 37);
ctx.drawImage(images.asp, 840, 132, 36, 37);
});
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvasbg" width="960" height="200" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="canvas" width="960" height="200" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</body>
</html>
最佳答案
您可以使用 requestAnimationFrame 来创建动画循环以允许您的条形图增长
要使高度不均匀的条形均匀增长，您可以应用百分比
// this will grow all bars at an even rate
bar1Height = bar1.maxHeight * percentComplete/100;
bar2Height = bar2.maxHeight * percentComplete/100;
percentComplete++;
这是示例代码和演示:http://jsfiddle.net/m1erickson/YR4D7/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var skillBars=[];
skillBars.push({max:200,color:"red"});
skillBars.push({max:75,color:"green"});
skillBars.push({max:275,color:"blue"});
var chartBottomY=325;
var chartBarWidth=30;
var chartBarPadding=20;
var percent=0;
animate();
function animate() {
// if not 100% done, request another frame
if(percent++<100){
requestAnimationFrame(animate);
}
// Drawing code goes here
ctx.clearRect(0,0,canvas.width,canvas.height);
var x=chartBarPadding;
for(var i=0;i<skillBars.length;i++){
var height=skillBars[i].max*percent/100;
ctx.fillStyle=skillBars[i].color;
ctx.fillRect(x,chartBottomY,chartBarWidth,-height);
x+=chartBarWidth+chartBarPadding;
}
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=350 height=350></canvas>
</body>
</html>
关于javascript - Canvas 条形图动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21972871/