通过在CSDN中的一些简单课程学习，跟随老师联系，做了如下的月亮，太阳和地球的运动效果。纪录在文章中，用于下次使用。
准备工作如下：
1. 使用三张背景图片
| 太阳 | 月亮 | 地球 |
 |
 |
 |
2. 在HTML页面中定义一个CANVAS
1 <body> 2 <div style="background-color:green;text-align:center ;"> 3 <canvas id="c" style="background-color:red;" width="300" height="300"></canvas> 4 </div> 5 </body>
3. 编写JS代码，使用canvas的API接口。 如 ：translate, drawImage 和arc 等方法
1 <script type="text/javascript">
2
3 var sun = new Image(),
4 moon = new Image(),
5 earth = new Image();
6
7 function init() {
8 sun.src = "html5image/sun.png";
9 moon.src = "html5image/moon.png";
10 earth.src = "html5image/earth.png";
11
12 window.requestAnimationFrame(draw);
13 }
14
15 function draw() {
16 var c = document.getElementById("c");
17 var ctx = c.getContext("2d");
18
19 ctx.globalCompositeOperation = "destination-over";
20 ctx.clearRect(0, 0, 300, 300);
21 ctx.fillStyle = "rgba(0,0,0,4)";
22 ctx.strokeStyle = "rgba(0,153,255,0.4)";
23 ctx.save();// save current status
24
25 ctx.translate(150, 150);
26
27 //earth
28 var time = new Date();
29 ctx.rotate((2 * Math.PI / 60) * time.getSeconds() + (2 * Math.PI / 60000) * time.getMilliseconds());
30 ctx.translate(105, 0);
31 ctx.drawImage(earth, -12, -12);
32
33 //moon
34 ctx.save();
35 ctx.rotate((2 * Math.PI / 6) * time.getSeconds() + (2 * Math.PI / 6000) * time.getMilliseconds());
36 ctx.translate(0, -28.5);
37 ctx.drawImage(moon, -3.5, -3.5);
38 ctx.restore(); //back to moon save
39
40 //the moving path
41 ctx.restore(); //back to the begin to draw earth
42 ctx.beginPath();
43 ctx.arc(150, 150, 105, 0, Math.PI * 2, false);
44 ctx.stroke();
45
46 //sun
47 ctx.drawImage(sun, 0, 0, 300, 300);
48
49 //exec an animation use the frame and the action is draw.
50 window.requestAnimationFrame(draw);
51 }
52
53 init();
54 </script>
如果需要知道更详细的步骤，请参考： http://edu.csdn.net/course/detail/1488
最后附上效果图：
thanks
时间： 2024-08-05 22:21:06