How to animate a cursor image when click in canvas area?

Question

I have changed my cursor to an own image, and I want to rotate the image -120deg when I click in the canvas area.

here is the animation I want to have, but on my cursor instead of an image:

img {
    -webkit-transition: -webkit-transform 0.05s ease-in;
}

img:hover{
    -webkit-transform:rotate(-120deg)
}

My canvas:

<canvas id="gamemap" width="900" height="526" onclick="animateCursor()"></canvas>

JavaScript:

function animateCursor() {

}

css:

#gamemap {
    cursor: url('../Image/myimageup'), auto;
}

Is there any solution for this?

Check this : http://stackoverflow.com/questions/9648131/jquery-rotate-cursor-angle — Jules, Apr 22 '15 at 09:45
Yes, i have already checked that link. And there is only an animation for the image element in the html code. I want an animation for the cursor image. — Scrat, Apr 22 '15 at 10:25

Gaurang Tandon · Answer 1 · 2015-04-22T09:55:47.750

0

DIRECT CHANGE

Just do canvas.style.cursor = new_image_path;

STEP ANIMATION
You could use an image array, containing list of images paths as string These images would be the same cursor image rotated at some angles by a step. Then, inside animateCursor function, do:

var img = 0, len = images.length, timer; // images is path array

function tick(){
    canvas.style.cursor = images[img] // new image every 5ms
    img++;

    if(img > len)
         clearTimeout(timer);
    else
         timer = setTimeout(tick, 5ms);
}

timer = setTimeout(tick, 5); // 5 ms

edited Apr 22 '15 at 09:55

answered Apr 22 '15 at 09:43

Gaurang Tandon

6,504
11
47
84

I have tried "Direct Change" but it only gives me the default cursor back.. Seems like the script not find the path. `"../image/myimage.png"` – Scrat Apr 22 '15 at 10:33
@Jigfors Make sure to wrap it inside "`url`"s parentheses. – Gaurang Tandon Apr 22 '15 at 14:17

score 0 · Answer 2 · answered Apr 22 '15 at 09:55

try this

function animateCursor() {
  $('#gamemap').css('-webkit-transition','-webkit-transform 0.05s ease-in');
  $('#gamemap').hover(function(){
    $('#gamemap').css('-webkit-transform','rotate(-120deg)');
  });
  $('#gamemap').css('cursor','url("../Image/myimageup"), auto');
}

How to animate a cursor image when click in canvas area?

2 Answers2