CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
karaxuna
karaxuna

Reputation: 26940

Html5 Canvas rotate single element

I know that there are many similiar questions already asked on stackoverflow, but still, I can not figure out how to do it. I want to rotate only ball texture. draw is called with timer:

var canvas;
var ctx;
var width;
var height;
var ready;
var textures;
var loadIndex;
var loadCount;
var keyCodes;
var mouseLoc;

var playerX;
var playerY;
var playerVelocity;

function init() {
    canvas = document.getElementById('game');
    ctx = canvas.getContext("2d");
    width = canvas.width;
    height = canvas.height;
    textures = [];
    loadingCount = 0;
    keyCodes = [];
    mouseLoc = {};

    playerX = 0;
    playerY = 0;
    playerVelocity = 6;

    textures['Background'] = loadTexture('./textures/Background.png');
    textures['Ball'] = loadTexture('./textures/Ball.png');

    setInterval(function(){ 
        if(loadingCount == 0) {
            update();
            draw();
        }
    }, 50);
}

function update(){
    if(keyCodes[37])
        playerX -= playerVelocity;
    if(keyCodes[38])
        playerY -= playerVelocity;
    if(keyCodes[39])
        playerX += playerVelocity;
    if(keyCodes[40])
        playerY += playerVelocity;
}

function draw() {
    //ctx.clearRect(0, 0, width, height);
    //ctx.beginPath();
    drawBackground();
    drawPlayer();
    //ctx.closePath();
    //ctx.fill();
}

function drawBackground(){
    ctx.drawImage(textures['Background'], 0, 0, width, height);
}

function drawPlayer(){
    ctx.save();
    ctx.rotate(0.17);
    ctx.drawImage(textures['Ball'], playerX, playerY, 100, 100);
    ctx.restore();
}

function loadTexture(src){
    var image = new Image();
    image.src = src;
    loadingCount++;
    image.onload = function(){
        loadingCount--;
    };
    return image;
}

document.onkeydown = function(evt){
    keyCodes[evt.keyCode] = true;
    evt.returnValue = false;
}
document.onkeyup = function(evt){
    keyCodes[evt.keyCode] = false;
}

document.onmousemove = function(evt){
    mouseLoc.x = evt.layerX;
    mouseLoc.y = evt.layerY;
}
document.onmousedown = function(evt){
    mouseLoc.down = true;
}
document.onmouseup = function(evt){
    mouseLoc.down = false;
}

init();

Upvotes: 0

Views: 1745

Answers (3)

Raptorious Rexotropolis
Raptorious Rexotropolis

Reputation: 86

You want to use delta time for calculating the distance of your rotation. That is, the time that has passed since the last frame. That will make your rotation smoother should your browser hiccup and lose a frame here or there.

So store the time of each frame so you can make the comparison between frames and set your rotation speed as radians per second.

Upvotes: 1

Alnitak
Alnitak

Reputation: 340055

Assuming that you want to give the illusion of the ball continuing to rotate, you should increase the rotation angle for each frame drawn.

As written, your code will give the ball a fixed rotation of 0.17 radians on each frame.

var frame = 0;

function drawPlayer() {
    ctx.save();
    ctx.rotate(0.17 * frame);
    ...
    ctx.restore();
}

function draw() {
    ++frame;
    drawPlayer();
    ...
}

Upvotes: 1

enhzflep
enhzflep

Reputation: 13109

You just need to save and restore the state of the canvas('s state-machine)

function drawPlayer(){
    ctx.save();
    ctx.rotate(0.17);
    ctx.drawImage(textures['Ball'], playerX, playerY, 100, 100);
    ctx.restore();
}

Upvotes: 1

Related Questions