I'm trying to paint on canvas using setInterval, but by looking the canvas it's starting from 1.06 and goes unbelievable fast. Issue what I would love to get solved: X Wont start from 1.06 it will start from 1.00 and go from there.
Here is the Fiddle: https://jsfiddle.net/r49naghf/
$(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);
})
via Jordn
No comments:
Post a Comment