畫布圖像旋轉不居中

Question

我想在畫布上圍繞其中心旋轉圖像。

預期 ：圖像在其中心旋轉

當前結果 ：圖像旋轉一圈

代碼包含：

1. 一個精靈類，它創建一個精靈並返回它。
2. 用於更新精靈位置的動畫循環。

我嘗試調整繪制圖像方法參數，但旋轉不居中。 它似乎在它的角落旋轉。 出了什么問題？

 var c = document.getElementById("myCanvas"); function sprite(options) { var that = {}; that.context = options.context; that.width = options.width; that.height = options.height; that.image = options.image; that.x = options.x; that.y = options.y; that.angle = 0; that.render = function() { that.context.clearRect(that.x, that.y, that.width, that.height); that.context.save(); that.context.translate(that.x + that.width / 2, that.y + that.height / 2); that.context.rotate(that.angle * Math.PI / 180); //---------------------->?? this is not working properly here. that.context.drawImage( that.image, 0, 0, ); that.context.restore(); }; return that; } var ship_img = new Image(); ship_img.src = 'https://chrismalnu.files.wordpress.com/2016/01/f-15-cipher-copy.png?w=640'; var ctx = c.getContext("2d"); var coin = sprite({ context: c.getContext("2d"), width: 100, height: 100, image: ship_img, x: 200, y: 200, }); var sp1 = new Image(); sp1.src = 'https://pbs.twimg.com/media/B59SYYlCUAAL6A0.png'; var ssp = sprite({ context: c.getContext("2d"), width: 50, height: 50, image: sp1, x:100, y:100, }); dt = 3 document.onkeydown = function(e) { switch (e.keyCode) { case 37: // alert('left'); coin.x -= dt; break; case 38: // alert('up'); coin.y -= dt; break; case 39: // alert('right'); // coin.x+=dt; coin.rotate(); break; case 40: // alert('down'); coin.y += dt; break; } }; function mainLoop() { // coin.x+=1; coin.angle += 1; ssp.angle -=1; coin.render(); ssp.render(); requestAnimationFrame(mainLoop); } // Start things off requestAnimationFrame(mainLoop); 

 <canvas id="myCanvas" width="600" height="390" style="border:1px solid #000000;"> Your browser does not support the HTML5 canvas tag. </canvas> 

在JSFiddle上查看

Answer 1

您正在目標畫布上以0,0左上角繪制圖像。
相反，繪制圖像的中心位於原點：

that.context.drawImage(
  that.image,
  -that.width / 2,
  -that.width / 2
);

我還建議只使用一個上下文並從主循環中清除畫布。
示例如下：

 var c = document.getElementById("myCanvas"); function sprite(options) { var that = {}; that.width = options.width; that.height = options.height; that.image = options.image; that.x = options.x; that.y = options.y; that.angle = 0; that.render = function() { ctx.save(); ctx.translate( that.x + that.width / 2, that.y + that.height / 2 ); ctx.rotate(that.angle * Math.PI / 180); ctx.drawImage( that.image, -that.width / 2, -that.height / 2, that.width, that.height ); ctx.restore(); }; return that; } var ship_img = new Image(); ship_img.src = 'https://chrismalnu.files.wordpress.com/2016/01/f-15-cipher-copy.png?w=640'; var ctx = c.getContext("2d"); var img1 = sprite({ width: 150, height: 150, image: ship_img, x: 100, y: 0, }); var img2 = sprite({ width: 50, height: 50, image: ship_img, x: 350, y: 70, }); function mainLoop() { ctx.clearRect(0, 0, c.width, c.height); img1.angle += 1; img1.render(); img2.angle -= 2; img2.render(); requestAnimationFrame(mainLoop); } // Start things off requestAnimationFrame(mainLoop); 

 <canvas id="myCanvas" width="500" height="150" style="border:1px solid #000000;"> Your browser does not support the HTML5 canvas tag. </canvas>