Javascript 画布上的动态矩形

我试着让小提琴中的每个矩形上下移动，使它看起来像一个音乐均衡器。我想让酒吧上下动画，但绝对不知道如何做动画。小提琴真的很有用：）

HTML

JavaScript

var宽度=8；
var距离=3；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.canvas.width=window.innerWidth；
var total=ctx.canvas.width；
var max=总计/2+52；
var min=总计/2-60；
ctx.fillStyle=“黑色”；
ctx.globalAlpha=0.3；
对于（var x=0；x您需要使用勾号函数来更新您的
画布
。您可以使用
requestAnimationFrame（）
，并选择要设置动画的时间间隔（您可以使用
Date.now（）
确定此时间间隔）

然后，保留一个条形图列表并更改其高度。然后将其重新渲染到您的
画布上

这里是一些快速的黑客代码

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();

var宽度=8；
var距离=3；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.canvas.width=window.innerWidth；
var total=ctx.canvas.width；
var max=总计/2+52；
var min=总计/2-60；
ctx.fillStyle=“黑色”；
ctx.globalAlpha=0.3；
var lastDrawTime=Date.now（）；
var draw=函数（）{
if（Date.now（）-lastDrawTime<60）{
返回webkitRequestAnimationFrame（绘制）；
}
ctx.clearRect（0，0，c.宽度，c.高度）；
对于（变量x=0；x
要制作动画，您必须清除画布并在每个帧的新位置重新绘制矩形，使用
setInterval（）
或
setTimeout（）
或
requestAnimationFrame（）

最好是使用
requestAnimationFrame（）
来适应每秒的帧数。
我不知道这是否是您需要的效果，但它应该可以帮助您开始

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();

var宽度=8；
var距离=3；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.canvas.width=window.innerWidth；
var total=ctx.canvas.width；
var max=总计/2+52；
var min=总计/2-60；
ctx.fillStyle=“黑色”；
ctx.globalAlpha=0.3；
var条=[]；
var barsCount=数学楼层（总计/12）；
var barsLastRefreshTime=null；
var barsRefreshInterval=500；
setInterval（函数（）{
对于（var i=0；ifiddle真的很有帮助：）@user3374309添加了一个提琴。它很凌乱，但它应该为您指明正确的方向！我想您忘了保存您的fiddle@user3374309这些天你是怎么保存小提琴的？必须登录才能保存它…讨厌吧
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();

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();