HTML5 Canvas - 车轮旋转功能行为奇怪

HTML5 Canvas - Wheel spinning function acts strange

本文关键字：功能 旋转 Canvas HTML5      更新时间：2023-09-26

在HTML5画布中，我有一个轮子，我试图旋转它，但是轮子表现得非常疯狂。它被围绕屏幕摆动，离开屏幕，然后再次进入屏幕。

var canvas = document.getElementById("my-canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "http://www.roulette30.com/wp-content/uploads/americanroulette.png";
ctx.drawImage(img, 70, 70, 200, 200);
function spinWheel() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.translate(0, 0, canvas.width, canvas.height);
    ctx.rotate(1 * Math.PI / 180);
    ctx.drawImage(img, 70, 70, 200, 200);
}
setInterval(spinWheel, 0);
#my-canvas {
  border: 1px solid black;
}
<!--<img id="my-image" height="200" width="200" src="http://www.roulette30.com/wp-content/uploads/americanroulette.png">
-->
<canvas id="my-canvas" width="400" height="400"></canvas>

我确信，如果我调用translate方法，我始终可以将滚轮定位在屏幕中央。随着rotate，这肯定会奏效。

欢迎任何见解。

您需要在自旋代码之外转换为死点的半宽/半高。

var canvas = document.getElementById("my-canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "http://www.roulette30.com/wp-content/uploads/americanroulette.png";
var speed = 1; // adding increases speed
var loop = true;
ctx.translate(canvas.width/2, canvas.height/2);
function spinWheel() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.rotate(speed * Math.PI / 180);
  ctx.drawImage(img, -(img.width/2), -(img.height/2));
  if (loop) requestAnimationFrame(spinWheel);
}
spinWheel();
#my-canvas {
  border: 1px solid black;
}
<canvas id="my-canvas" width="400" height="400"></canvas>

相关文章：