javascript - 无法让 Canvas 元素正确旋转

Question

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

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

fiddle :http://jsfiddle.net/xTFkU/

Answer 1

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

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

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

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