How can I rotate the images without css and jquery???


  • CoderDojo Foundation

    0_1535653111945_upload-71de109d-6f2e-41b6-bcc6-c27a6a58dd9d
    the player must look at the mouse cursor, so I need the player’s image to be rotated relative to the screen
    this image does not have its own id, because I downloaded it right in the script, so I can not use css for rotating…


  • CoderDojo Foundation

    Hi @Igor-Aksyutin! Could you share your code somewhere so we can understand exactly what’s going on? If the image is a HTML tag then it is probably possible to use a combination of JavaScript and CSS to rotate it, though it might be a bit trickier than usual.


  • CoderDojo Foundation

    @Philip-Harney
    Here is my code:
    var canvas = document.createElement(‘canvas’);
    var playerStdCanvas = document.createElement(‘canvas’);
    canvas.width = 800;
    canvas.height = 600;
    playerStdCanvas.width = 40;
    playerStdCanvas.height = 30;
    document.body.appendChild(canvas);
    document.body.appendChild(playerStdCanvas);
    document.querySelector(’#game_window’).onmousemove = function(event) {
    event = event || window.event;
    console.log(event);
    }

    var c = canvas.getContext(‘2d’);
    var pl_c = playerStdCanvas.getContext(‘2d’);

    var playerStdImage = new Image();
    playerStdImage.src = ‘images/player_std.bmp’;

    var pl_x = 50;
    var pl_y = 40;
    var pl_speed = 7;
    var mouse_x = 0;
    var mouse_y = 0;
    var angle = 0;

    window.addEventListener(‘keydown’, onKeyDown);

    window.addEventListener(‘load’, start);
    function start() {
    window.requestAnimationFrame(mainLoop);
    }

    function mainLoop() {
    update();
    draw();
    window.requestAnimationFrame(mainLoop);
    }

    function onKeyDown(event) {
    if (event.keyCode == 87) {
    pl_y -= pl_speed;
    }
    if (event.keyCode == 65) {
    pl_x -= pl_speed;
    }
    if (event.keyCode == 83) {
    pl_y += pl_speed;
    }
    if (event.keyCode == 68) {
    pl_x += pl_speed;
    }
    }

    function fixEvent(e) {
    e = e || window.event

    if ( e.pageX == null && e.clientX != null ) {
    var html = document.documentElement
    var body = document.body
    e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
    e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)
    }

    if (!e.which && e.button) {
    e.which = e.button & 1 ? 1 : ( e.button & 2 ? 3 : ( e.button & 4 ? 2 : 0 ) )
    }

    return e
    }

    function mouseMove(event) {
    event = fixEvent(event)
    mouse_x = event.pageX;
    mouse_y = event.pageY;
    }
    a
    document.onmousemove = mouseMove

    function update() {
    pl_c.translate(pl_x + 20, pl_y + 15);
    pl_c.rotate(angle);
    }

    function pointDirection(x1, y1, x2, y2) {
    a = Math.atan((y2 - y1) / (x2 - x1));
    return a;
    }

    function draw() {
    c.clearRect(0, 0, 640, 480);
    c.fillStyle = ‘ForestGreen’
    c.fillRect(0, 0, 640, 480);
    pl_c.drawImage(playerStdImage, pl_x, pl_y);
    angle = pointDirection(pl_x, pl_y, mouse_x, mouse_y);
    }


  • CoderDojo Foundation

    Hi @Igor-Aksyutin, thanks for that! I don’t know exactly what you’re trying to achieve, but you could just rotate the canvas you place that image into, like this:

    playerStdCanvas.setAttribute('style','transform: rotate(90deg)');
    

    You just need to modify the number of degrees in the string to control the rotation. Does that work for you?


  • CoderDojo Foundation

    yes, this is what I was looking for, thank you!



  • You can use this javascript code so you can rotate your image easily. But you have only to change the image destination.

    var looper;
    var degrees = 0;
    function rotateAnimation(el,speed){

    var elem = document.getElementById(el);

    if(navigator.userAgent.match(“Chrome”)){
    elem.style.WebkitTransform = “rotate(”+degrees+“deg)”;

    } else if(navigator.userAgent.match(“Firefox”)){
    elem.style.MozTransform = “rotate(”+degrees+“deg)”;

    } else if(navigator.userAgent.match(“MSIE”)){
    elem.style.msTransform = “rotate(”+degrees+“deg)”;

    } else if(navigator.userAgent.match(“Opera”)){
    elem.style.OTransform = “rotate(”+degrees+“deg)”;
    } else {
    elem.style.transform = “rotate(”+degrees+“deg)”;
    }
    looper = setTimeout(‘rotateAnimation(’’+el+’’,’+speed+’)’,speed);
    degrees++;
    if(degrees > 359){
    degrees = 1;
    }
    document.getElementById(“status”).innerHTML = “rotate(”+degrees+“deg)”;
    }
    And now use the HTML code for the image:

    <img id=“exe” style=‘position:absolute;left:450px;height:300px;’ src=“images/example.png” alt=“exe”>
    And it’s about to finish just add another script tag:

    rotateAnimation(“exe”,30);

    I think will clarify your doubt.

    Thanks
    Katherine


Log in to reply
 

Looks like your connection to CoderDojo Forum was lost, please wait while we try to reconnect.