如何将图像（用javascript制作）旋转到鼠标

Question

我在Stack附近探索并发现了一些对我不起作用的例子。我做了一个简单的HTML画布，里面有一个带箭头的圆形图像。我希望圆（图像）指向鼠标。我认为旋转的程度是错误的，所以请随意纠正我。但更大的问题是如何旋转图像。  我试过用  document.getElementById("circleImg").css('transform', 'rotate('+angle+'deg)');但它会给出错误＆＃34; circleImg＆＃34;是空的。
这是我小提琴的链接〜http://jsfiddle.net/Jsbbvk/Mr4Tz/110/

提前谢谢！

Answer 1

你的主要问题是，使用Canvas时你不会真正拥有可以在绘制后调用的对象。就像你有一个实体笔和纸一样。一旦你画了一些东西，它就会卡在纸上。要改变它，你需要删除它。或画笔画笔画并重新绘制新的东西。

所以document.getElementById("circleImg")不起作用，因为网页上没有该名称的对象。只需在画布上绘制一支钢笔。

你需要做什么才能重新绘制最后一张图像，但要旋转。你已经在重绘了，所以只需添加一段代码就可以为你旋转画布。

我认为This Question的答案非常简单，应该可以解决问题。

或者，取决于您的最终计划。您可以使用SVG而不是画布。他们都有自己的优点和缺点。但是SVG创建了javascript并且可以工作的实际DOM元素。所以getElementById()可用于SVG绘图。