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

Question

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

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

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

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

我的 Canvas :

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

JavaScript:

function animateCursor() {

}

CSS:

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

有什么解决办法吗？

Answer 1

试试这个

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