css - 将具有特定样式的圆添加到 Canvas

Question

您好，我在 canvas 中做 HTML 5 游戏。我已经在 canvas 里面做了一些事情，我需要把它添加进去。我需要添加看起来像行星并旋转 360° 的 div。这是演示的链接。如果您不知何故知道如何去做，我会很高兴。

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>里面元素并让它神奇地在 Canvas 上绘制。也就是说，您可以使用 JavaScript 以与现在在 Canvas 内相同的方式绘制/动画此图像。

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

动画:

• 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> 的样式位于 Canvas 之上，但不使用 JS 无法将其绘制在 Canvas 内。