Question

我想创建一个动画，该动画在左侧的下图中绘制。它应该可视化，即云在球体周围旋转。

Wrong rotation around a pivot

我希望云A以某个固定半径（即100px）绕枢轴点X旋转。当然，云是否能够正确定位，否则它看起来会很奇怪。我已经实现了在固定距离内围绕枢轴旋转的效果，但是我的矩形被错误地定向（参见右图）。

代码如下：

<canvas id="cloudsCanvas" width="1050" height="300"></canvas>
   <script>
        var cloudCenter = [400, 400];

        // pivot point coordinates
        var cx = 1050 / 2;
        var cy = 800;
        var deg = 45;

        var cloud1 = new Image;


        window.onload = function () {
            var cloudsCanvas = document.getElementById("cloudsCanvas");
            var cloudsContext = cloudsCanvas.getContext("2d");

            setInterval(function () {
                cloudsContext.save();
                cloudsContext.clearRect(0, 0, cloudsCanvas.width, cloudsCanvas.height);

                deg += 1;
                // Center the needle on the canvas.
                cloudsContext.translate(cx, cy);
                cloudsContext.rotate(deg * Math.PI / 180);
                cloudsContext.drawImage(cloud1, cloudCenter[0], cloudCenter[1]);

                cloudsContext.restore();
            }, 50);

        };

        cloud1.src = './img/cloud1.png';
 </script>

任何想法如何解决这个问题？谢谢！

Answer 1

0角总是指向右边，所以只需创建一个按时钟方向旋转90度的云（就好像它是在这个地方绘制的） - 它应该如下所示：

cloud

您可以选择使用辅助画布预旋转以将未旋转的云绘制到。

<强> Modified fiddle here

您还需要在代码中进行一些其他更改：

cloudCenter必须是地球右侧的起始位置（即0度的位置）
轮换后翻译

像这样：

cloudsContext.translate(cx, cy);
cloudsContext.rotate(deg * Math.PI / 180);
cloudsContext.translate(-cx, -cy);
cloudsContext.drawImage(cloud1, cloudCenter[0], cloudCenter[1]);

Answer 2

与其他响应者一样，我也认为使用照片编辑器将图像预旋转90度更有效。

但是如果你想知道如何以编程方式做到这一点，这里有一个例子和一个小提琴。

演示：http://jsfiddle.net/m1erickson/YqBC2/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<script 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 angle=0;
        var cx=150;
        var cy=150;
        var radius=50;
        var img90;

        var img=new Image()
        img.onload=function(){
            canvas.width=img.height;
            canvas.height=img.width;
            ctx.save();
            ctx.translate(canvas.width/2,canvas.height/2);
            ctx.rotate(Math.PI/2);
            ctx.drawImage(img,-img.width/2,-img.height/2);
            ctx.restore();
            img90=new Image();
            img90.onload=function(){
                canvas.width=300;
                canvas.height=300;
                animate();
            }
            img90.src=canvas.toDataURL();
        }
        img.crossOrigin="anonymous";
        img.src="https://dl.dropboxusercontent.com/u/139992952/cloud1.png";


        function draw(){
            ctx.clearRect(0,0,canvas.width,canvas.height);
            ctx.beginPath();
            ctx.arc(cx,cy,radius,0,Math.PI*2);
            ctx.closePath();
            ctx.fillStyle="orange";
            ctx.fill();
            ctx.stroke();

            ctx.save();
            ctx.translate(cx,cy);
            ctx.rotate(angle);
            ctx.drawImage(img90,radius+35-img.width/2,-img.height/2);
            ctx.restore();

        }

        function animate() {
            requestAnimationFrame(animate);

            // Drawing code goes here
            angle+=Math.PI/360;
            draw();
        }


    }); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=350 height=350></canvas>
</body>
</html>

HTML5：图像绕枢轴旋转，方向错误

2 个答案: