随机高度Javascript

Question

我正在为学校制作一个小数据图表。我们还得随机设置一个按钮，我不知道怎么做?我试了很多方法，但是没有效果。有人有意见吗?这是我的代码https://jsfiddle.net/gbfbvbj7

(function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var height = -20;
var xPosNew = -950;
var turning = 0;
var button;
var dataName = ["Space Invaders","Street Fighter II","Donkey Kong","Pac-Man","Asteroids","Defender","Ms. Pac-Man","Centipede","Galaxian","StarHorse2","Donkey Kong Jr.","Mr. Do!","Tempest","Mortal Kombat II","Beatmania","Q*bert","Mortal Kombat","Robotron: 2084","Dig Dug","Pole Position","Popeye","Out Run","Pump It Up","Missile Command","Jungle Hunt","Dragon's Lair","Berzerk","Scramble","Battlezone","Stargate","Mushiking: King of the Beetles","Mahjong Fight Club 3","Sega Network Mahjong MJ4","Star Wars","Super Cobra","Space Duel","Pong","Breakout","Oshare Majo: Love and Berry","Sea Wolf"];
var dataSales = [360000,200000,132000,400000,100000,60000,125000,55988,40000,38614,30000,30000,29000,27000,25000,25000,24000,23000,22228,21000,20000,20000,20000,18000,16000,15780,15136,15122,15000,13500,13000,12892,12695,12337,12038,12000,11000,10300,10000,9000];
    function init() {
        button = document.querySelectorAll('.randomize');
        button[0].addEventListener("click" , randomize);
        window.requestAnimationFrame(draw);
        text();
    }
    function randomize(){
    }
    function draw(){
        height += 4;
        turning += 0.005;
        var maxBar = 0;
        var xPos = 0;
        var yPos = 555;
        var geel = 0;
        var blauw = 255;
        var groen = 255;
        var rotatie = 0;

        for (var i = 0; i < dataSales.length; i++) {
                        maxBar = Math.max(maxBar, dataSales[i] / 800);
                        rotatie += 0.157;
                        geel += 6;
                        blauw += 6;
                        groen -= 6;
                        xPos += 23;
                        ctx.save();
                        ctx.beginPath();
                        ctx.translate(480, 400);
                        ctx.fillStyle= "rgb(" + geel + "," + groen + "," + blauw + ")";
                        ctx.rotate(rotatie);
                        ctx.rect(0,-155,15,-Math.min(height, dataSales[i] / 1800));
                        ctx.fill();
                        ctx.restore();

                }
            window.requestAnimationFrame(draw);

    }

    function text(){
            var rotatie2 = -1.48;
            var geel = 0;
            var blauw = 255;
            var groen = 255;
        for (var i = 0; i < dataName.length; i++) {
            rotatie2 += 0.157;
            xPosNew += 23;
            geel += 6;
            blauw += 6;
            groen -= 6;
                        ctx.save();
                        ctx.translate( canvas.width - 1, 0);
                        ctx.rotate(3 * Math.PI / 2);
                        ctx.font = "11px arial";
                        ctx.fillStyle= "rgb(" + geel + "," + groen + "," + blauw + ")";
                        ctx.textAlign = "left";
                        ctx.fillText( dataName[i], -780, xPosNew);
                        ctx.restore();
        }   
        for (var i = 0; i < dataSales.length; i++) {

                        rotatie2 += 0.1575;
                        ctx.save();
                        ctx.beginPath();
                        ctx.translate(480, 400);
                        ctx.rotate(rotatie2);
                        ctx.fill();
                        ctx.fillStyle = "#fff";
                        ctx.font = "11px arial";
                        ctx.textAlign = "left";
                        ctx.fillText( dataSales[i], 95,0);
                        ctx.restore();
        }
    }

init();
})();

Answer 1

使用Math.random():

function randomize() {
    // Put new random values into dataSales (0-499,999)
    dataSales = dataSales.map(function() {
      return Math.floor(Math.random() * 500000);
    });
    // Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // redraw
    draw();
}

顺便说一句，当你不玩动画时，没有理由使用window.requestAnimationFrame(draw);，只需调用draw一次，然后在需要重新绘制时再次调用。