1

キャンバス上の他のオブジェクトを静止させたまま、キャンバスの中央にある画像を360度回転させるアニメーションを作成しようとしています。基本的に、画像に回転効果のようなファンを与えたいのですが、動作しません。私の場合。私が使用しているコードスニペットに従ってください。

キャンバスサイズが400x200であると想定します

 var surface;
 var img = new Image();
 var angle = 0;
 img.src = "images/teddy.png";
 surface = document.getElementById("canvas");
 var ctx = surface.getContext('2d');

 // Clear the canvas to White
ctx .fillStyle = "rgb(255,255,255)";
ctx .fillRect(0, 0, surface.width, surface.height);
// Save the current context
ctx .save();
// Translate to the center point of our image
ctx .translate(happy.width * 0.5, happy.height * 0.5);
ctx .rotate(DegToRad(angle,surfaceContext)); //calling function here  
ctx .translate(-(happy.width * 0.5), -(happy.height * 0.5));
ctx .drawImage(happy, 200, 100);
angle++;
ctx.restore();

上記のコードは、setInterval（loop、10）;を使用して呼び出されています。

x軸の位置200pxで直径100pxで画像を回転させますが、私が欲しいのは、画像が現在の位置で回転し続ける必要があるということです

私はHTML5を初めて使用するので、我慢してください:)

ありがとう〜Simer

4

1 に答える 1

3

私はこれがあなたが望むものだと思います：http： //jsfiddle.net/zH9yy/

var render, loop, t, dt,
    DEG2RAD = Math.PI / 180,
    cvs = document.querySelector('canvas'),
    ctx = cvs.getContext('2d'),
    teddy = new Image(),
    heart = new Image(),
    angle = 0,
    reqAnimFrame = 
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame;

cvs.width = 400;
cvs.height = 200;

teddy.src = 'https://d3qcduphvv2yxi.cloudfront.net/assets/1204584/view_small/43b95bee9e4e9a8a1effcdc3d401774a.jpg';

heart.src = 'http://a.dryicons.com/files/graphics_previews/flower_heart.jpg';

render = function (timestamp) {
    dt = timestamp - t;
    t = timestamp;

    // Clear the canvas to White
    ctx.fillStyle = "rgb(255,255,255)";
    ctx.fillRect(0, 0, cvs.width, cvs.height);

    // draw heart
    ctx.drawImage(heart, -20, -120);

    // draw teddy
    ctx.save();
    ctx.translate(cvs.width/2, cvs.height/2); // move cursor to canvas center
    ctx.rotate(DEG2RAD * angle); // rotate canvas
    ctx.drawImage(teddy, -teddy.width/2, -teddy.height/2); // draw img center at cursor center
    angle += dt / 16.67 * 6; // increment angle ~ 360 deg/sec
    ctx.restore();
};

loop = function (timestamp) {
    reqAnimFrame(loop);
    render(timestamp);
};

t = Date.now();
loop(t);

</ p>

于 2012-08-16T15:51:12.463 に答える