2

我正在尝试为画布上的旋转重复图标设置动画，但它没有围绕图像中心旋转。我不确定该怎么做才能使其正常旋转。

setInterval(draw, 30);
    var degrees = 0.0;

    function draw() {

        var canvas = document.getElementById('tutorial');

        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, 16, 16);
            degrees += 0.10;

            ctx.save();

            ctx.translate(8,8);
            ctx.rotate(degrees);

            // Draw half open circle
            ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.arc(8, 8, 6, 0, 1.75 * Math.PI);
            ctx.stroke();

            // Draw arrowhead
            ctx.lineWidth = 2;
            ctx.moveTo(13, 1);
            ctx.lineTo(9, 5);
            ctx.lineTo(13, 5);
            ctx.lineTo(13, 1);
            ctx.stroke();

            ctx.restore();
        }
    }

小提琴：http: //jsfiddle.net/xTFkU/

4

2 回答 2

2

您正在旋转画布并进行平移，但绘制然后执行您的绘图功能，就好像画布没有被平移一样。

基本上，您需要做的是将画布转换为您正在绘制的图像宽度和高度的一半。这将使 0,0 成为图像的中心。然后从所有坐标中减去偏移量。

我所做的是添加一个偏移值，即宽度和高度除以 2。然后我将画布平移该偏移量，并从所有坐标中减去该偏移量。

工作演示

(function() {

    setInterval(draw, 30);
    var degrees = 0.0;
    var offset = 8;
    function draw() {

        var canvas = document.getElementById('tutorial');

        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, 16, 16);
            degrees += 0.10;

            ctx.save();

            ctx.translate(offset, offset);
            ctx.rotate(degrees);

            // Draw half open circle
            ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.arc(8-offset , 8-offset, 6, 0, 1.75 * Math.PI);
            ctx.stroke();

            // Draw arrowhead
            ctx.lineWidth = 2;
            ctx.moveTo(13-offset , 1-offset);
            ctx.lineTo(9-offset , 5-offset);
            ctx.lineTo(13-offset , 5-offset);
            ctx.lineTo(13-offset , 1-offset);
            ctx.stroke();

            ctx.restore();
        }
    }
})();​
于 2012-09-13T12:52:33.667 回答
0

随着ctx.translate(8,8);您将坐标原点移动到画布的中心，然后旋转。您现在需要围绕中心 ( 0/0) 画一个圆圈，而不是围绕点 ( 8/8)：http: //jsfiddle.net/xTFkU/4/。或者，您可以通过以下方式将旋转的坐标系移回：http ctx.translate(-8,-8);: //jsfiddle.net/xTFkU/5/

于 2012-09-13T13:00:03.510 回答