标签：html5 image canvas rotation javascript

在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方法,则可以始终将轮子定位在屏幕的中心.随着旋转,这肯定会起作用.

任何见解将受到欢迎.

解决方法:

您需要将旋转代码之外的值转换为宽度/高度的一半,以确保死点.

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>

标签：html5,image,canvas,rotation,javascript
来源： https://codeday.me/bug/20191118/2031939.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。