行星运行，刚开始什么都不会，也许查找方法的问题折腾好长一段时间。我自己总结的文档，一共有7个文件夹，如果谁想要可以加我QQ499471127
这是html的帮助文档，其实直接在html帮助文档里，就可以实现，一些东西的查找，这下尴尬了！
自己看了好多博客才，注释代码完成，后来发现直接帮助文档皆可以解决问题。帮助文档连接：http://www.w3school.com.cn/tags/html_ref_canvas.asp
这里强调一点，因为是帮别人注释，别人要求注释就行，偷个懒，就用“//”注释了，建议初学者要用：<!-- --> 注释
不多说了，直接上代码：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">//设置页面的编码格式。没有设置的时候页面上有中文会出现乱码。
5 <script>
6 window.onload = function(){//当页面加载完成后， 执行的方法
7 var sun = new Image();////创建图片对象
8 var moon = new Image();
9 var earth = new Image();
10 function init(){//图片的加载
11 sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';////定义图片的映射地址
12 moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
13 earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
14 window.requestAnimationFrame(draw);//改变下一次重绘时的DOM样式。
15 }
16
17 function draw() { //定义绘图函数
18 var ctx = document.getElementById('canvas').getContext('2d');//获取要操作的canvas，获取该canvas的2D绘图环境对象
19
20 ctx.globalCompositeOperation = 'destination-over';
21 ctx.clearRect(0,0,300,300); //绘制裁剪区域（一个矩形）
22
23 ctx.fillStyle = 'rgba(0,0,0,0.4)';//从画布上的(0,0)坐标点为起始点，绘制一个宽高均为0.4px的实心圆
24 ctx.strokeStyle = 'rgba(0,153,255,0.4)'; //从画布上的(0,153)坐标点为起始点，绘制一个宽高均为0.4px的描边圆
25
26 ctx.save(); //保存状态
27 ctx.translate(150,150);//在x轴方向做150px的向右位移，在y轴方向做150px的向下位移
28
29 // Earth
30 var time = new Date();
31 ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
32 ctx.translate(105,0);//在x轴方向做105px的向右位移
33 ctx.fillRect(0,-12,50,24); //重新绘制一个矩形
34 ctx.drawImage(earth,-12,-12);
35
36 // Moon
37 ctx.save();//保存状态
38 ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
39 ctx.translate(0,28.5);//在y轴方向做28.5px的向下位移
40 ctx.drawImage(moon,-3.5,-3.5);//修改参数，在画布坐标（-3.5,-3.5）的位置绘制图片
41 ctx.restore();//推出最后一个入栈的状态
42
43 ctx.restore(); //再次推出最后一个入栈的状态
44
45 ctx.beginPath();//重置当前的路径
46 ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
47 ctx.stroke();//描边
48
49 ctx.drawImage(sun,0,0,300,300);
50
51 window.requestAnimationFrame(draw);//改变下一次重绘时的DOM样式。
52 }
53
54 init();//开始运行
55
56 }
57 </script>
58 </head>
59 <body>
60 <canvas id="canvas" width="400" height="300"> //canvas设置好其宽高
61 您的浏览器不支持canvas标签
62 </canvas>
63 </body>
64 </html>
65
66 View Code
![Spring MVC 自学杂记（五） -- SpringMVC与前台的json数据交互[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)