在画布上添加具有特定样式的圆圈

Question

嗨，我在画布上做HTML 5游戏。我已经在画布内完成了一些工作，需要将其添加到其中。我需要添加看起来像行星的div并旋转360°。这是演示的链接。如果您知道怎么做，那会很高兴。

http://jsfiddle.net/065aey2u/26/

<canvas></canvas>
<div id=earth"></div>

#earth{
styling of earth its complicated and contains before and after styling so i 
cant just drow it into canvas. Look demo and let me know if you know how to 
draw into canvas

}

Answer 1

不幸的是，您无法简单地将<div>放在<canvas>元素内并使其神奇地在画布上绘制。就是说，您可以像现在一样在画布中使用JavaScript来绘制/设置此图像的动画。

我不会只为您编写所有代码，而是为您解释一些概念以供研究。

制作动画：

• requestAnimationFrame(functionName)

  • 每帧更新canvas元素

  • 在该函数中绘制所有内容以渲染每一帧

更新图片

• 使用rotate()和translate()方法（类似于CSS）

绘制圆圈

ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(image, 0, 0, width, height);

Reference for every Canvas method you will need to use

Reference for requestAnimationFrame

或者，您可以简单地将<div>设置为位于画布顶部，但是如果不使用JS，则无法在画布内部绘制它。