<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="text" height="300" width="300"></canvas>
</body>
<style>
#text{
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto;
position: absolute;
background: gray;
}
</style>
<script type="text/javascript">
window.onload=function () {
var flag=0;
var scale=0;
var flagscale=0;
var canvas=document.getElementById("text");
if (canvas.getContext){
var ctx=canvas.getContext("2d");
setInterval(function () {
flag++
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.save()
ctx.translate(150,150)
ctx.rotate(flag*Math.PI/180)
//放大
if (scale==100){
flagscale=-1
}else if (scale==0){
flagscale=1
}
scale+=flagscale;
ctx.scale(scale/50,scale/50)
ctx.beginPath();
ctx.fillRect(-50,-50,100,100);
ctx.restore();
},1)
}
}
</script>
</html>
