Question

我对Javascript HTML5 Canvas中的行星旋转模拟有疑问。

我有画布对象，我需要渲染一个带有spherize的圆圈并显示行星的纹理：例如http://www.planetaryvisions.com/images_new/4128.jpg

我需要旋转该纹理并在画布上围绕其轴显示模拟旋转行星（2D Canvas上的伪3D）。仅在一个方向上旋转：只滚动纹理。

所以，我想要比在CSS3（http://codepen.io/chinchang/pen/xCkus）中实现的示例更真实地做到这一点

您能为我提供一个现成的解决方案，并提供实施我的任务的示例吗？

谢谢！

Answer 1

这是一种做法......

演示（非动画版）：http://jsfiddle.net/m1erickson/tsEL8/

enter image description here

创建一个圆形剪裁区域（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>

HTML5 Canvas模拟围绕其轴的旋转行星？

1 个答案: