我有一个关于Javascript HTML5 Canvas中的行星旋转模拟的问题。
我有画布对象，我需要渲染一个带球体的圆并显示行星的纹理：例如，此http://www.planetaryvisions.com/images_new/4128.jpg
我需要旋转该纹理，并在画布上绕其轴显示模拟旋转行星（在2D Canvas上为伪3D）。仅在一个方向上旋转：只需滚动纹理即可。
因此，我想比在CSS3（http://codepen.io/chinchang/pen/xCkus）中实现的示例中更实际
您能为我提供一个现成的解决方案，以举例说明如何执行我的任务吗？
谢谢！
最佳答案
这是一种实现方式...
演示（非动画版本）：http://jsfiddle.net/m1erickson/tsEL8/
创建一个圆形剪切区域（context.arc + context.clip）作为地球。
使用drawImage将4128.jpg绘制到剪辑中，以便图像的左侧在剪辑区域的左侧。
通过在裁剪区域的左侧和右侧绘制轻微的嵌入式阴影，使地球呈现3D幻觉。这将使图像在环绕地球的左侧和右侧时看起来具有深度。
您可以通过在剪切区域的左侧和右侧绘制四分之一圆弧，然后使用shadowOffsetX在地球左侧向右扩展阴影，在地球右侧向左扩展来创建插图阴影。
在每个动画循环中
清除画布
drawImage您的4128.jpg的“ x”位置向左移动了1个像素。
绘制插图阴影。
当您将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>
关于javascript - HTML5 Canvas模拟绕其轴旋转的行星吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20365342/