<一>CSS部分
@charset "utf-8"; *{ padding: 0; margin: 0; outline: none; } #canvas{ position: fixed; background: white; width: 100%; height: 100%; }
<二>HTML部分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>選擇界面</title> <link rel="stylesheet" href="css/index.css" /> <script type="text/javascript" src="js/jQuery.js"></script> <script type="text/javascript" src="js/index.js"></script> </head> <body> <canvas id="canvas" width="800" height="600"> <b>瀏覽器不支持時顯示部分</b> </canvas> </body> </html>
<三>JS部分
$(function(){ /*獲取繪圖界面和繪圖環境(800, 600)*/ var ui = $('#canvas'); var canvas = ui[0].getContext('2d'); /*獲取圖片對象*/ var img = new Image(); /*當圖片加載完成后才能繪制圖片*/ img.onload = function(){ var num = 0; setInterval(function(){ num ++; num = num == 360 ? 0 : num; draw(num); }, 100); } img.src = "image/1.jpg"; /*繪圖方法*/ function draw(num){ /*封裝canvas操作起始處*/ canvas.save(); canvas.clearRect(0, 0, 800, 600); /*原點偏移*/ canvas.translate(250, 250); /*旋轉 (弧度)*/ canvas.rotate(num*Math.PI/180); /*原點偏移*/ canvas.translate(-150,-150); /*繪制圖片*/ canvas.drawImage(img, 0, 0, 300, 300); /*封裝canvas操作結束處*/ canvas.restore(); } });