<一>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(); } });