今天就跟大家聊聊有關怎么在html5中實現一個畫布旋轉效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
keleyi.htm的代碼如下：
<!DOCTYPE HTML> <html><head><title>html旋轉畫布</title><script type="text/javascript" src="/jquery-1.10.2.min.js"></script><script type="text/javascript" src="jb51.js"></script></head><body><canvas id="jb51"></canvas></body></html>
jb51.js的代碼如下：
代碼如下:
/** 功能：畫布旋轉*/(function(){ var canvas=null, context=null, angle=0; function resetCanvas(){ canvas=document.getElementById("jb51"); canvas.width=window.innerWidth; canvas.height=window.innerHeight; context=canvas.getContext("2d"); } function animate(){ context.save(); try{ //清除畫布 context.clearRect(0, 0, canvas.width, canvas.height); //設置原點 context.translate(canvas.width * 0.5, canvas.height * 0.5); //旋轉角度 context.rotate(angle); //設置填充顏色 context.fillStyle = "#FF0000"; //繪制矩形 context.fillRect(-30, -30, 60, 60); angle += 0.05 * Math.PI; } finally{ context.restore(); } } $(window).bind("resize",resetCanvas).bind("reorient",resetCanvas); $(document).ready(function(){ window.scrollTo(0,1); resetCanvas(); setInterval(animate,40); });})();看完上述內容，你們對怎么在html5中實現一個畫布旋轉效果有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
