<!DOCTYPE HTML>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<title>等待载入</title>
</head>
<body>
<canvas id="wait" height="100" width="100">你的浏览器不支持canvas</canvas>
<script>
var wait = document.getElementById('wait').getContext('2d');
wait.fillRect(0,0,100,100);
//translate() 方法重新映射画布上的 (0,0) 位置,canvas绘图是基于状态的
wait.translate(50,50);
//每次旋转角度
var angle = Math.PI*2/12;
var cos = Math.cos(angle);
var sin = Math.sin(angle);
wait.lineWidth = 4 ;
wait.lineCap = 'round' ;
var c = 0;
setInterval(rotate,25);
function rotate(){
var col = Math.floor(200/6*(c%13));
c++;
//任何一个html元素渲染完成后可以得到一张位图，把这张位图上所有的点都做一次矩阵运算，将得到一张的新的位图
//一个数学公式,每次旋转30度
wait.transform(cos,sin,-sin,cos,0,0);
wait.strokeStyle = 'rgba(0,0,'+col+',1)';
wait.beginPath();
wait.moveTo(10,0);
wait.lineTo(40,0);
wait.stroke();
}
</script>
</body>
</html>
效果：