html5画布中的旋转逻辑答案

【问题标题】：Rotation logic in html5 canvashtml5画布中的旋转逻辑
【发布时间】：2014-03-04 15:33:51
【问题描述】：

我有这个动画，但我无法克服逻辑。我希望有人可以在这里帮助我。

基本上我需要这个：http://jsfiddle.net/PDE85/9/ 但没有箭头做如此疯狂的动作。它应该附加到空心圆圈的前面以模拟扩展箭头。

我得到了turn right here 的三角形，但是当我将它与position logic 混合时它不起作用，如第一个示例所示。

这里是参考代码

(function() {

    var size = ($(window).height()/5)*4;
    $("#intro-container").css('width',size);
    $("#intro-canvas").css('width',size);
    $("#intro-canvas").css('height',size);

    var interval = window.setInterval(draw, 30);
    var degrees = 0.0;
    var offset = 20;
    var rotate = 0;

    var canvas = document.getElementById('intro-canvas');
    var ctx = canvas.getContext('2d');

    canvas.width = size;
    canvas.height = size;

    draw();

    function draw() {
        if (canvas.getContext) {
            ctx.fillStyle="white";
            ctx.strokeStyle="white";
            ctx.clearRect(0, 0, size, size);

            ctx.save();

            ctx.translate(size/2, size/2);
            ctx.rotate(-90 * Math.PI / 180);

            ctx.beginPath();
            ctx.lineWidth = size/8;
            ctx.arc(0, 0, size/3, 0, rotate * Math.PI / 180);
            //ctx.shadowBlur=1;
            //ctx.shadowColor="black";

            ctx.stroke();

            ctx.restore();

            ctx.beginPath();
            ctx.save();

            // moving logic
            ctx.translate(size/2, size/2);
            ctx.rotate(-Math.PI / 180 * -rotate+1);
            ctx.translate(-size/3, -size/3);

            // rotating logic
            ctx.translate(size/2, size/2);
            ctx.rotate((rotate * Math.PI + 420) / 180);

            ctx.moveTo(0,0);
            ctx.lineTo(size/6,0);
            ctx.lineTo(0,size/6);
            ctx.lineTo(0,0);

            ctx.fill();


            ctx.restore();

            rotate += 1;

            if(rotate > 360){
                window.clearInterval(interval)
            }

        }
    }
})();

【问题讨论】：

标签： javascript html animation canvas html5-canvas

【解决方案1】：

我相信你正在寻找这个：http://jsfiddle.net/PDE85/12/

旋转来自，旋转调用是不必要的。

另外你需要一个倒三角形，因此坐标需要更新：

  ...

  // ctx.rotate((rotate * Math.PI + 420) / 180);
  ctx.moveTo(0,0);
  ctx.lineTo(-size/6,0);
  ctx.lineTo(0,-size/6);

  ...

【讨论】：

哦，这就是你想要的。很高兴它有帮助。