Question

我正试图让这个小提琴中的每个矩形上下移动，使它看起来像一个音乐均衡器。我希望这些条形图上下动画，并且完全不知道如何制作动画。小提琴真的会有所帮助：）

HTML

<canvas id="myCanvas" height="100"> </canvas>

的JavaScript

 var width = 8;
    var distance = 3;


    var c = document.getElementById("myCanvas");

    var ctx = c.getContext("2d");
     ctx.canvas.width  = window.innerWidth;
     var total = ctx.canvas.width;
     var max = total/2+52;
     var min = total/2-60;
     ctx.fillStyle = "black";
     ctx.globalAlpha=0.3;

    for(var x = 0; x<total; x+=12)
    {
        if(x<= max && x>=min)
        {
            var height= Math.floor(Math.random()*40)+5;

        }
        else
        {
             var height= Math.floor(Math.random()*100)+5;

         }
        ctx.fillRect(x,100-height,width,height);



    }

Answer 1

您需要使用 tick 功能更新canvas。您可以使用requestAnimationFrame()并选择要设置动画的时间间隔（您可以使用Date.now()确定这一点。）

然后，记下你的酒吧名单并改变他们的身高。然后将其重新呈现给canvas。

这是一些快速的hacky代码......

var width = 8;
var distance = 3;


var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");
ctx.canvas.width = window.innerWidth;
var total = ctx.canvas.width;
var max = total / 2 + 52;
var min = total / 2 - 60;
ctx.fillStyle = "black";
ctx.globalAlpha = 0.3;

var lastDrawTime = Date.now();
var draw = function () {
    if (Date.now() - lastDrawTime < 60) {
        return webkitRequestAnimationFrame(draw);
    }

    ctx.clearRect(0, 0, c.width, c.height);

    for (var x = 0; x < total; x += 12) {
        if (x <= max && x >= min) {
            var height = Math.floor(Math.random() * 40) + 5;
         } else {
            var height = Math.floor(Math.random() * 100) + 5;
        }
        ctx.fillRect(x, 100 - height, width, height);
    }
    lastDrawTime = Date.now();
    webkitRequestAnimationFrame(draw);
};

draw();

Answer 2

我不知道这是否是您需要的效果，但它应该可以帮助您开始。

requestAnimationFrame用于在每个帧执行draw（）。每个栏在指定的延迟后重新定义，然后下降。

var width = 8;
var distance = 3;

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");
ctx.canvas.width  = window.innerWidth;
var total = ctx.canvas.width;
var max = total/2+52;
var min = total/2-60;
ctx.fillStyle = "black";
ctx.globalAlpha=0.3;

var bars = [];
var barsCount = Math.floor(total / 12);
var barsLastRefreshTime = null;
var barsRefreshInterval = 500;

setInterval(function() {
    for(var i = 0; i<barsCount; i++) {
        var x = i * 12;
        if(x<= max && x>=min) {
            var height= Math.floor(Math.random()*40)+5;
        } else {
            var height= Math.floor(Math.random()*100)+5;
        }
        bars[i] = height;
    }
    barsLastRefreshTime = (new Date()).getTime();
}, barsRefreshInterval);

function draw() {
    var currentTime = (new Date()).getTime();

    var timePassedRate = (barsRefreshInterval - (currentTime - barsLastRefreshTime)) / barsRefreshInterval;

    ctx.clearRect(0,0,c.width,c.height);
    for(var i = 0; i<bars.length; i++) {
        var x = i * 12;
        var height = bars[i] * timePassedRate;
        ctx.fillRect(x,100-height,width,height);
    }
    requestAnimationFrame(draw);
}
draw();

（我找不到拯救小提琴的方法？！？）

Answer 3

要制作动画，您必须使用setInterval()或setTimeout()或requestAnimationFrame()清除画布并在每个帧的新位置重绘矩形。

最好是使用requestAnimationFrame()来调整每秒帧数。

画布上的动态矩形

HTML

的JavaScript

3 个答案: