<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Canvas动画旋转的小方块</title> <link rel="stylesheet" href=""> </head> <body> <script> window.onload=function(){ var canvas = document.querySelector("canvas"); canvas.width = canvas.height = 500 canvas.style.background = "red" if (canvas.getContext) { var ext = canvas.getContext("2d"); var num = 0; ext.fillStyle = "#f90"; ext.translate(canvas.width / 2, canvas.height / 2); function rotate() { ext.clearRect(-canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height) num++; ext.save(); ext.rotate(num * Math.PI / 180) ext.translate(-50, -50) ext.fillRect(0, 0, 100, 100); ext.restore(); } var t=setInterval(rotate,30); canvas.onmouseover=function(){ clearInterval(t); } canvas.onmouseout=function(){ t=setInterval(rotate,30); } } } </script> <canvas></canvas> </body> </html>
主要是学习了canvas的一些相关api，案例还是很简单的
原文：http://www.cnblogs.com/jone-chen/p/5038407.html