通过在CSDN中的一些简单课程学习，跟随老师联系，做了如下的月亮，太阳和地球的运动效果。纪录在文章中，用于下次使用。

准备工作如下：

1. 使用三张背景图片

太阳 月亮 地球

2. 在HTML页面中定义一个CANVAS

 <body>

     <div style="background-color:green;text-align:center ;">

         <canvas id="c" style="background-color:red;" width="300" height="300"></canvas>

     </div>

 </body>

3. 编写JS代码，使用canvas的API接口。 如 ：translate, drawImage 和arc 等方法

   <script type="text/javascript">

         var sun = new Image(),

             moon = new Image(),

             earth = new Image();

         function init() {

             sun.src = "html5image/sun.png";

             moon.src = "html5image/moon.png";

             earth.src = "html5image/earth.png";

             window.requestAnimationFrame(draw);

         }

         function draw() {

             var c = document.getElementById("c");

             var ctx = c.getContext("2d");

             ctx.globalCompositeOperation = "destination-over";

             ctx.clearRect(0, 0, 300, 300);

             ctx.fillStyle = "rgba(0,0,0,4)";

             ctx.strokeStyle = "rgba(0,153,255,0.4)";

             ctx.save();// save current status

             ctx.translate(150, 150);

             //earth

             var time = new Date();

             ctx.rotate((2 * Math.PI / 60) * time.getSeconds() + (2 * Math.PI / 60000) * time.getMilliseconds());

             ctx.translate(105, 0);

             ctx.drawImage(earth, -12, -12);

             //moon

             ctx.save();

             ctx.rotate((2 * Math.PI / 6) * time.getSeconds() + (2 * Math.PI / 6000) * time.getMilliseconds());

             ctx.translate(0, -28.5);

             ctx.drawImage(moon, -3.5, -3.5);

             ctx.restore(); //back to moon save

             //the moving path

             ctx.restore(); //back to the begin to draw earth

             ctx.beginPath();

             ctx.arc(150, 150, 105, 0, Math.PI * 2, false);

             ctx.stroke();

             //sun

             ctx.drawImage(sun, 0, 0, 300, 300);

             //exec an animation use the frame and the action is draw.

             window.requestAnimationFrame(draw);

         }

         init();

     </script>

如果需要知道更详细的步骤，请参考： http://edu.csdn.net/course/detail/1488

最后附上效果图：

动态效果图，请查看下面链接 。 http://ihelper.eu-gb.mybluemix.net/

thanks

学习HTML5, Canvas及简单动画的使用的更多相关文章

  1. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  2. HTML5 Canvas画图与动画学习59例

    HTML5 Canvas画图与动画学习59例 学习HTML5 动画,画图的好资料. HTML5 Canvas画图与动画学习59例

  3. HTML5 Canvas核心技术图形动画与游戏开发 ((美)David Geary) 中文PDF扫描版​

    <html5 canvas核心技术:图形.动画与游戏开发>是html5 canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典.amazon五星级超级 ...

  4. 学习HTML5 canvas遇到的问题

    学习HTML5 canvas遇到的问题 1. 非零环绕原则(nonzZero rule) 非零环绕原则是canvas在进行填充的时候是否要进行填充的判断依据. 在判断填充的区域拉一条线出来,拉到图形的 ...

  5. HTML5 Canvas水波纹动画特效

    HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比如这次介绍的水波纹动画特效.以前我们也分享过一款基于HTML5 WebGL的水波荡漾动画,让 ...

  6. 转载《学习HTML5 canvas遇到的问题》

    学习HTML5 canvas遇到的问题 1. 非零环绕原则(nonzZero rule) 非零环绕原则是canvas在进行填充的时候是否要进行填充的判断依据. 在判断填充的区域拉一条线出来,拉到图形的 ...

  7. canvas制作简单动画

    在画布元素<canvas>中,除了绘制图形.图像.文字外,还可以制作一些简单的动画,制作过程十分简单,主要分为两步操作: 1．自定义一个函数,用于图形的移动或其他动作. 2．使用setIn ...

  8. html5 canvas 实现简单的画图

    今天早上看了一下 canvas 前端画图,数据可视化, 百度的 echart.js  , d3等 js 库都已经提供了强大的绘制各种图形的 API. 下面记录一下 有关canvas 绘图的基本知识: ...

  9. HTML5 Canvas绘文本动画（使用CSS自定义字体）

    一.HTML代码: <!DOCTYPE html> <html> <head> <title>Matrix Text - HTML5 Canvas De ...

随机推荐

  1. jQuery与原生JS相互转化

    前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操 ...

  2. Vue-route实现原理

    1.原理图如下所示 2.说明 1.安装插件的时候监听hashchange事件,监视_route 2.处理router-link 获取到path关联组件 3.等待hashchange触发,匹配route ...

  3. Java:文件字符流和字节流的输入和输出

    最近在学习Java,所以就总结一篇文件字节流和字符流的输入和输出. 总的来说,IO流分类如下: 输入输出方向:     输入流(从外设读取到内存)和输出流(从内存输出到外设) 数据的操作方式: 字节流 ...

  4. 【莫烦Pytorch】【P1】人工神经网络VS. 生物神经网络

    滴:转载引用请注明哦[握爪] https://www.cnblogs.com/zyrb/p/9700343.html 莫烦教程是一个免费的机器学习(不限于)的学习教程,幽默风俗的语言让我们这些刚刚起步 ...

  5. 机器学习中模型泛化能力和过拟合现象(overfitting)的矛盾、以及其主要缓解方法正则化技术原理初探

    1. 偏差与方差 - 机器学习算法泛化性能分析 在一个项目中,我们通过设计和训练得到了一个model,该model的泛化可能很好,也可能不尽如人意,其背后的决定因素是什么呢?或者说我们可以从哪些方面去 ...

  6. Tomcat系列(8)——Tomcat运行模式连接数和线程池

    Connector的主要功能,是接收连接请求,创建Request和Response对象用于和请求端交换数据:然后分配线程让Engine(也就是Servlet容器)来处理这个请求,并把产生的Reques ...

  7. [JDK8] Stream

    1 collect(toList()) collect(toList()) 方法由Stream 里的值生成一个列表,是一个及早求值操作. 2 map 如果有一个函数可以将一种类型的值转换成另外一种类型 ...

  8. 财务平台亿级数据量毫秒级查询优化之elasticsearch原理解析

    财务平台进行分录分表以后,随着数据量的日渐递增,业务人员对账务数据的实时分析响应时间越来越长,体验性慢慢下降,之前我们基于mysql的性能优化做了一遍,可以说基于mysql该做的优化已经基本上都做了, ...

  9. [Machine Learning] 浅谈LR算法的Cost Function

    了解LR的同学们都知道,LR采用了最小化交叉熵或者最大化似然估计函数来作为Cost Function,那有个很有意思的问题来了,为什么我们不用更加简单熟悉的最小化平方误差函数(MSE)呢? 我个人理解 ...

  10. CentOS7自定义系统服务示例

    CentOS7的服务systemctl脚本存放在:/usr/lib/systemd/,有系统(system)和用户(user)之分,需要开机不登陆就能运行的程序,存在系统服务里,即:/usr/lib/ ...