旋转并在canvas元素移动的图像？ [英] Rotating and moving an image in a canvas element?

问题描述

我想移动，并在旋转的元素球的图像。球是68x68和画布安全工程师。球沿x和y轴移动，当它击中一个壁翻转其x和y速度 - 所有的工作原理。我只是不明白怎么做运动的顶部旋转。

我的draw（）函数，我通过window.setInterval每30毫秒打电话，看起来是这样的：

  VAR平局=功能（）{
    ctx.clearRect（0，0，canvas.width，canvas.height）;
    ctx.save（）;
    ctx.rotate（ball_radians）;
    ctx.drawImage（ball_img，X，Y）;
    ctx.restore（）;    //计算新的x，y和ball_radians
  }
 

这使球飞在屏幕上，这么清楚我做错了什么。我缺少什么？

解决方案

1. 翻译的上下文到画布对象应该围绕的点。


2. 旋转背景。


3. 或者：
   
   
   
   • 翻译由负旋转中心的对象中的偏移量的背景，然后绘制在 0,0 的对象，或
   
   
   • 绘制使用负为旋转的中心的对象内的偏移的图像。
   
   

例如。

  ctx.save（）;
ctx.translate（canvasLocX，canvasLocY）;
ctx.rotate（ballRotationInRadians）;
ctx.drawImage（ball_img，-ballCenterX，-ballCenterY）;
ctx.restore（）;
 

请注意，如果你需要，而不是保存和恢复画布绝对速度，（处理许多属性您没有更改），你可以取消你的工作：

  ctx.translate（canvasLocX，canvasLocY）;
ctx.rotate（ballRotationInRadians）;
ctx.drawImage（ball_img，-ballCenterX，-ballCenterY）;
ctx.rotate（-ballRotationInRadians）;
ctx.translate（-canvasLocX，-canvasLocY）;
 

的的premature优化的previous位已被盲目地从别人人云亦云;我没有亲自基准，以确认它是正确的。的

修改：我已经添加了这这里嘲笑了工作示例：<一href=\"http://phrogz.net/tmp/canvas_beachball.html\">http://phrogz.net/tmp/canvas_beachball.html

I would like to move and rotate an image of a ball in a element. The ball is 68x68 and the canvas is 300x200. The ball moves along the x and y axis, flipping its x and y velocity when it hits a wall - all of this works. I just can't figure how to do rotation on top of the movement.

My draw() function, which I call through window.setInterval every 30ms, looks something like this:

  var draw = function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.rotate(ball_radians);
    ctx.drawImage(ball_img, x, y);
    ctx.restore();

    // calculate new x, y, and ball_radians
  }

This makes the ball fly around the screen, so clearly I'm doing something wrong. What am I missing?

解决方案

1. Translate the context to the point on the canvas that the object should rotate about.
2. Rotate the context.
3. Either:
   • Translate the context by the negative offset within the object for the center of rotation, and then draw the object at 0,0, or
   • Draw the image using the negative offset within the object for the center of rotation.

e.g.

ctx.save();
ctx.translate( canvasLocX, canvasLocY );
ctx.rotate( ballRotationInRadians );
ctx.drawImage( ball_img, -ballCenterX, -ballCenterY );
ctx.restore();

Note that if you need absolute speed, instead of saving and restoring the canvas (handling many properties that you didn't change) you can just undo your work:

ctx.translate( canvasLocX, canvasLocY );
ctx.rotate( ballRotationInRadians );
ctx.drawImage( ball_img, -ballCenterX, -ballCenterY );
ctx.rotate( -ballRotationInRadians );
ctx.translate( -canvasLocX, -canvasLocY );

The previous bit of premature optimization has been blindly parroted from someone else; I have not personally benchmarked to verify that it is correct.

Edit: I've added a mocked up working example of this here: http://phrogz.net/tmp/canvas_beachball.html

这篇关于旋转并在canvas元素移动的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！