画布条形图动画

我试图在画布标签上加快速度，并且在基本动画方面遇到困难。我已经找遍了，我可以获得大部分我已经找到工作的教程，但是我已经遇到了一些麻烦，将其转化为我正在尝试做的事情。画布条形图动画

我有一个条形图，我正在为我的投资组合构建，我希望能够在图形上为条形图添加动画。基本上当页面加载时，条从图的底部开始，并向上成长到它们需要的位置。我有一个我在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>

来源

2014-02-23 Joe Burton

您可以使用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>

来源

2014-02-23 19:10:45 markE

这是一个巨大的帮助！非常感谢！ –

我看到几个问题。

首先，你一次绘制所有的东西，而你应该在每个图像加载后绘制，但是yiu会想要使用setTimeout或类似的东西来允许绘制canvas元素。

你也应该有一个方法吧，并记住当前的步骤值，它只会绘制下一个块。

我会放在图像标签image.onload function with return上，当它加载绘制下一个栏并加载下一个。

但请记住使用setTimeout来允许绘图发生。

这里有一些链接，可以帮助

JavaScript animation with multiple setTimeout

https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/AnimatingtheCanvas/AnimatingtheCanvas.html

来源

2014-02-23 19:11:47

感谢您的提示和链接。我觉得我可能在绘图部分做错了什么。在看到您的一些资源后，我将不得不重温我的做法。 –

画布条形图动画

回答

相关问题