我有一个关于 Javascript HTML5 Canvas 中的行星旋转模拟的问题。
我有画布对象，我需要渲染一个带有球体的圆圈并显示行星的纹理：例如这个http://www.planetaryvisions.com/images_new/4128.jpg
我需要旋转该纹理并在画布上围绕其轴显示模拟旋转行星（2D 画布上的伪 3D）。仅向一个方向旋转：只需滚动纹理。
所以，我想比在 CSS3 中实现的示例更现实 (http://codepen.io/chinchang/pen/xCkus)
您能否为我提供一个现成的解决方案以及实施我的任务的示例？
谢谢！
【问题讨论】：
标签： javascript html css canvas
这是一种方法......
演示（非动画版）：http://jsfiddle.net/m1erickson/tsEL8/
创建一个圆形剪辑区域（context.arc + context.clip）作为您的地球。
使用 drawImage 将 4128.jpg 绘制到剪辑中，使图像的左侧位于剪辑区域的左侧。
通过在剪切区域的左侧和右侧绘制轻微的嵌入阴影，为您的地球营造 3D 幻觉。这将使图像看起来有深度，因为它“包裹”在地球的左侧和右侧。
您可以通过在剪切区域的左侧和右侧绘制四分之一圆弧并使用 shadowOffsetX 在地球左侧向右延伸阴影并在右侧向左延伸来创建嵌入阴影地球。
在每个动画循环期间
当您将 4128.jpg 尽可能向左移动而不暴露空白空间后，在第一个 4128.jpg 的右侧绘制另一个 4128.jpg 副本（创建 4128 的无限循环）。
代码如下：
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img4128=new Image();
img4128.onload=function(){
start();
}
img4128.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/4128.jpg";
function start(){
// clip a circle representing a globe
ctx.arc(100,100,50,0,Math.PI*2,false);
ctx.closePath();
ctx.clip();
// drawImage the map into the clip
ctx.globalAlpha=.50;
ctx.drawImage(img4128,-20,0);
ctx.globalAlpha=1.00;
// draw shadows on left and right side of globe
ctx.beginPath();
ctx.arc(100,100,52,Math.PI*0.70,Math.PI*1.30,false);
ctx.shadowColor="black";
ctx.shadowBlur=5;
ctx.shadowOffsetX=5;
ctx.stroke();
ctx.beginPath();
ctx.arc(100,100,52,-Math.PI*0.30,Math.PI*0.30,false);
ctx.shadowColor="black";
ctx.shadowBlur=5;
ctx.shadowOffsetX=-5;
ctx.stroke();
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
【讨论】：