Question

我正在尝试在画布上设置旋转重复图标的动画，但它不会围绕图像的中心旋转。我不知道该怎么做才能让它正常旋转。

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/

Answer 1

您正在旋转画布并进行平移，但绘制然后执行绘图功能，就像画布未翻译一样。

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

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

<强> Working Demo

(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();
        }
    }
})();

Answer 2

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

无法使canvas元素正确旋转

2 个答案: