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