本文介紹了如何在畫布中旋轉一張圖像?的處理方法，對大家解決問題具有一定的參考價值，需要的朋友們下面隨著小編來一起學習吧！
問題描述
我正在制作一個 HTML5 畫布游戲，我希望旋轉其中一張圖片.
I am making an HTML5 canvas game, and I wish to rotate one of the images.
var link = new Image();
link.src='img/link.png';
link.onload=function(){
ctx.drawImage(link,x,y,20,20); // draws a chain link or dagger
}
我想旋轉這張圖片.旋轉圖像的標準方法是在畫布上下文對象上設置旋轉.但是，這會旋轉整個游戲！我不想這樣做，只想旋轉這個精靈.我該怎么做?
I wish to rotate this image. The standard way of rotating image was to set a rotation on the canvas context object. However, that rotates the entire game! I don't want to do that, and only wish to rotate this one sprite. How do I do that?
推薦答案
使用 .save() 和 .restore() (更多信息):
link.onload=function(){
ctx.save(); // save current state
ctx.rotate(Math.PI); // rotate
ctx.drawImage(link,x,y,20,20); // draws a chain link or dagger
ctx.restore(); // restore original states (no rotation etc)
}
這篇關于如何在畫布中旋轉一張圖像?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！
【網站聲明】本站部分內容來源于互聯(lián)網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯(lián)系我們刪除處理，感謝您的支持！