在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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句