源码：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Canvas动画</title> </head> <body> <div id="canvas-warp"> <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;"> 你的浏览器居然不支持Canvas？！赶快换一个吧！！ </canvas> </div> <script> window.onload = function(){ var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext("2d"); context.fillStyle = "#000"; context.fillRect(0,0,800,600); drawOutCircle(context) var point = getPoint(200, 400, 300, 240); var i = 0; drawSmallCircle(context, point[i]); setInterval(function() { context.clearRect(10,10,780,580); context.fillStyle = "#000"; context.fillRect(0,0,800,600); drawOutCircle(context); i++ if(i == 231) { i = 0; } drawSmallCircle(context, point[i]); }, 1000) } function drawOutCircle(context) { context.strokeStyle = "white"; context.beginPath(); context.arc(400,300,200,0*Math.PI,2*Math.PI); context.stroke(); context.fillStyle = "yellow"; context.beginPath(); context.arc(400,300,100,0*Math.PI,2*Math.PI); context.fill(); context.font = "40px serif"; context.fillStyle = "black"; context.fillText('太',400-20,300+20); } function drawSmallCircle(context, coords) { context.fillStyle = "blue"; context.beginPath(); context.arc(coords.x,coords.y,30,0*Math.PI,2*Math.PI); context.fill(); context.font = "20px serif"; context.fillStyle = "black"; context.fillText('地',coords.x-10,coords.y+10); } function getPoint(r, ox, oy, count){ var point = []; var radians = (Math.PI / 180) * Math.round(360 / count), //弧度 i = 0; for(; i < count; i++){ var x = ox + r * Math.sin(radians * i), y = oy + r * Math.cos(radians * i); point.unshift({x:x,y:y}); //为保持数据顺时针 } return point; } </script> </body> </html>
效果图：
学习资料：
1、https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API