Question

我尝试使用setInterval在画布上绘画，但是通过查看画布，它从1.06开始，并且变得难以置信。发出我想要解决的问题： X不会从1.06开始，它将从1.00开始并从那里开始。

$(document).ready(function() {
    var canvas = $('#crashGraphic')[0];
    var graphStep = 0.1;
    var startX = 0;
    var context = canvas.getContext('2d');
    var canvasWidth;
    var canvasHeight;
    var scaleX = 30;
    var scaleY = 200;
    var border = 5;
    var drawX, drawY;

    function paintCrashGraphic(curentX, randomNumber, timeLeft) {
        canvasWidth = canvas.width;
        canvasHeight = canvas.height;
        context.lineWidth = 2;
        if ((border * 2 + curentX * scaleX) > canvasWidth) {
            scaleX = (canvasWidth - border * 2) / curentX;
        }
        if ((border * 2 + getCrashGraphicY(curentX) * scaleY) > canvasHeight) {
            scaleY = (canvasHeight - border * 2) / getCrashGraphicY(curentX);
        }
        context.strokeStyle = '#a5a5a5';
        context.clearRect(0, 0, canvasWidth, canvasHeight);
        context.beginPath();
        context.moveTo(border, canvasHeight - border);
        context.lineTo(border, border);
        context.moveTo(border, canvasHeight - border);
        context.lineTo(canvasWidth - border, canvasHeight - border);

        drawX = startX;
        var isFirst = true;
        context.stroke();
        context.beginPath();
        context.lineWidth = 3;

        context.strokeStyle = '#0d9b50';
        while (drawX <= curentX) {
            drawY = getCrashGraphicY(drawX);
            drawX += graphStep;
            if (isFirst) {
                isFirst = false;
                context.moveTo(border + drawX * scaleX, canvasHeight - border - (drawY - 1) * scaleY);
            } else {
                context.lineTo(border + drawX * scaleX, canvasHeight - border - (drawY - 1) * scaleY);
            }
        }
        if (timeLeft) {
            context.font = "100px Ubuntu-Regular,Helvetica,Arial,sans-serif";
            context.textAlign = "center";
            context.fillStyle = "#929292";
            drawString(context, 'Next round in \n ' + timeLeft, canvas.width / 2, canvas.height / 2, '#bf1c2d', '0', 'Ubuntu-Regular,Helvetica,Arial,sans-serif', '50');
        } else if (!randomNumber) {
            context.stroke();
            context.font = "100px Ubuntu-Regular,Helvetica,Arial,sans-serif";
            context.textAlign = "center";
            context.fillStyle = "#929292";
            context.fillText(drawY.toFixed(2) + 'x', canvas.width / 2, canvas.height / 2);
        } else if (randomNumber) {
            context.stroke();
            context.font = "50px Ubuntu-Regular,Helvetica,Arial,sans-serif";
            context.textAlign = "center";
            context.fillStyle = "red";
            drawString(context, 'Busted \n@ ' + parseFloat(randomNumber).toFixed(2) + 'x', canvas.width / 2, canvas.height / 2, '#bf1c2d', '0', 'Ubuntu-Regular,Helvetica,Arial,sans-serif', '50');
        }
    }

    function drawString(ctx, text, posX, posY, textColor, rotation, font, fontSize) {
        var lines = text.split("\n");
        if (!rotation) rotation = 0;
        if (!font) font = "'serif'";
        if (!fontSize) fontSize = 16;
        if (!textColor) textColor = '#000000';
        ctx.save();
        ctx.font = fontSize + "px " + font;
        ctx.fillStyle = textColor;
        ctx.translate(posX, posY);
        ctx.rotate(rotation * Math.PI / 180);
        for (var i = 0; i < lines.length; i++) {
            ctx.fillText(lines[i], 0, i * fontSize);
        }
        ctx.restore();
    }

    function getCrashGraphicY(x) {
        return Math.pow(1.06, x);
    }

    function getCrashGraphicX(y) {
        return Math.log(y) / Math.log(1.06);
    }
    paintCrashGraphic(startX);
    var timer;
    var x = 1;
    var speed = 1000/200;
    timer = setInterval(function(){
        x += 0.01;
      paintCrashGraphic(x);
    }, speed);


})

变量不是从零开始

0 个答案: