Question

我已将光标更改为自己的图像，我想在画布区域中单击时旋转图像-120deg。

这是我想要的动画，但是在我的光标而不是图像上：

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

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

我的画布：

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

JavaScript的：

function animateCursor() {

}

的CSS：

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

有没有解决方案？

Answer 1

直接更改

只需canvas.style.cursor = new_image_path;

STEP ANIMATION
您可以使用图像数组，其中包含图像路径列表作为字符串这些图像将是一个步骤以某个角度旋转的相同光标图像。然后，在animateCursor函数内，执行：

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

Answer 2

试试这个

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');
}

单击画布区域时如何为光标图像设置动画？

2 个答案: