javascript - Canvas 水平旋转图像

Question

我正在研究动画优化，我想尝试一下 Canvas ，看看它的表现如何，但我在 Canvas 方面经验不足，而且我不知道如何准备这种动画的概念。

这是显示动画应如何旋转的 gif，如下所示:

这是我当前的js代码:

var cvs = document.getElementById('coin-spin'),
    ctx = cvs.getContext('2d'),
    w = cvs.width = 400,
    h = cvs.height = 400,
    cx = w / 2,
    cy = h / 2,
    a = 0;

var img = new Image();

var loop = function() {
    // BG
    ctx.fillStyle = '#ccc';
    ctx.fillRect(0, 0, w, h);

    // draw image
    ctx.save();
    ctx.translate(cx, cy);
    ctx.rotate(Math.PI / 180 * a);
    ctx.translate(-cx, -cy);
    ctx.drawImage(img, cx - (img.width / 2), cy -  (img.height / 2));
    ctx.restore();

    // axis
    ctx.strokeStyle = '#000';

    ctx.beginPath();
    ctx.moveTo(cx, 0);
    ctx.lineTo(cx, h);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(0, cy);
    ctx.lineTo(w, cy);
    ctx.stroke();

    //mod angle
    a++;
    window.requestAnimationFrame(loop);
};

img.onload = function() {
    loop();
};

img.src = 'https://image.ibb.co/gqkeXx/coin.png';

和工作demo fiddle 。

有人可以展示如何添加代码，以便图像像 gif 一样水平旋转吗？

编辑----

我添加了旋转，因为这也是要做的事情，但仍在努力如何旋转它。

Answer 1

要解决沿两个轴旋转对象的问题(通过将宽度映射到正弦波来伪造一个轴)，您可以使用屏幕外 Canvas 来渲染围绕一个轴旋转的硬币，然后应用第二个旋转来渲染该 Canvas ;

//make an offscreen canvas for rendering the coin rotating around one axis
var offscreenCanvas = document.createElement('canvas');

var cvs = document.getElementById('coin-spin'),
        ctx = cvs.getContext('2d'),
        w = cvs.width = 400,
        h = cvs.height = 400,
        cx = w / 2,
        cy = h / 2,
        a = 0;

    var img = new Image();
    var frameCount = 0;

    var loop = function() {
    frameCount++;

    // BG
    ctx.fillStyle = '#ccc';
    ctx.fillRect(0, 0, w, h);

    offscreenContext.fillStyle = '#ccc';
    offscreenContext.fillRect(0, 0, w, h);

    //determine how wide to render the offscreen canvas so we can fake
    //rotation around the second axis
    var imgRenderWidth = offscreenCanvas.width * Math.sin(frameCount/10.0)

    //render the coin rotating around one axis to the offscreen canvas
    offscreenContext.save();
    offscreenContext.translate(img.width/2, img.height/2);
    offscreenContext.rotate(Math.PI / 180 * a);
    offscreenContext.translate((0-img.width)/2, (0-img.height)/2);
    offscreenContext.drawImage(img, 0,0);
    offscreenContext.restore();

        // draw offscreen canvas to the screen with our precalculated width
        ctx.save();
        ctx.drawImage(offscreenCanvas, cx - (imgRenderWidth / 2), cy -  (offscreenCanvas.height / 2), imgRenderWidth, offscreenCanvas.height);
        ctx.restore();

        // axis
        ctx.strokeStyle = '#000';

        ctx.beginPath();
        ctx.moveTo(cx, 0);
        ctx.lineTo(cx, h);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(0, cy);
        ctx.lineTo(w, cy);
        ctx.stroke();

        //mod angle
        a++;
        window.requestAnimationFrame(loop);
    };

    //once the image has loaded, we know what size our offscreen canvas needs to be
    img.onload = function() {
    offscreenCanvas.width = img.width;
    offscreenCanvas.height = img.height;

        loop();
    };

    img.src = 'https://image.ibb.co/gqkeXx/coin.png';

    //prepare the offscreen context so we can render to it later
    var offscreenContext =  offscreenCanvas.getContext('2d');

https://jsfiddle.net/ay3h5vuo/