簡體   English   中英

HTML5 Canvas - 車輪旋轉功能很奇怪

[英]HTML5 Canvas - Wheel spinning function acts strange

在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> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM