学习HTML5, Canvas及简单动画的使用
通过在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及简单动画的使用的更多相关文章
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- HTML5 Canvas画图与动画学习59例
HTML5 Canvas画图与动画学习59例 学习HTML5 动画,画图的好资料. HTML5 Canvas画图与动画学习59例
- HTML5 Canvas核心技术图形动画与游戏开发 ((美)David Geary) 中文PDF扫描版
<html5 canvas核心技术:图形.动画与游戏开发>是html5 canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典.amazon五星级超级 ...
- 学习HTML5 canvas遇到的问题
学习HTML5 canvas遇到的问题 1. 非零环绕原则(nonzZero rule) 非零环绕原则是canvas在进行填充的时候是否要进行填充的判断依据. 在判断填充的区域拉一条线出来,拉到图形的 ...
- HTML5 Canvas水波纹动画特效
HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比如这次介绍的水波纹动画特效.以前我们也分享过一款基于HTML5 WebGL的水波荡漾动画,让 ...
- 转载《学习HTML5 canvas遇到的问题》
学习HTML5 canvas遇到的问题 1. 非零环绕原则(nonzZero rule) 非零环绕原则是canvas在进行填充的时候是否要进行填充的判断依据. 在判断填充的区域拉一条线出来,拉到图形的 ...
- canvas制作简单动画
在画布元素<canvas>中,除了绘制图形.图像.文字外,还可以制作一些简单的动画,制作过程十分简单,主要分为两步操作: 1．自定义一个函数,用于图形的移动或其他动作. 2．使用setIn ...
- html5 canvas 实现简单的画图
今天早上看了一下 canvas 前端画图,数据可视化, 百度的 echart.js , d3等 js 库都已经提供了强大的绘制各种图形的 API. 下面记录一下 有关canvas 绘图的基本知识: ...
- HTML5 Canvas绘文本动画（使用CSS自定义字体）
一.HTML代码: <!DOCTYPE html> <html> <head> <title>Matrix Text - HTML5 Canvas De ...
随机推荐
- 51nod 1630（定积分 + 期望）
51nod1630 每个人进入竞技场后,会等概率随机匹配一个人,匹配到的人与当前胜利和失败场数无关. 胜利达到x场,或失败达到y场后,退出竞技场,根据退出时的胜利场数获得奖励,不能中途放弃. 水平高的 ...
- selenium各版本jar包下载地址
http://selenium-release.storage.googleapis.com/index.html
- CDN-常用静态资源公共库
js.css 等静态资源可以放在自己的服务器上,或者引用网络上的公共库使用(CDN) CDN 读取失败时从本地加载 <script src="https://code.jquery.c ...
- Github 开源项目（一）websocketd （实战：实时监控服务器内存信息）
websocketd 是WebSocket守护进程,它负责处理WebSocket连接,启动您的程序来处理WebSockets,并在程序和Web浏览器之间传递消息. 安装:websocketd wget ...
- python入门篇
第一篇:python入门 第二篇:数据类型.字符编码.文件处理 第三篇:函数 第四篇:模块与包 第五篇:常用模块 第六篇:面向对象 第七篇:面向对象高级 第八篇:异常处理 第九篇:网络编程 第十篇:并 ...
- 模拟赛20181015 Uva1078 bfs+四维dp
题意:一张网格图,多组数据,输入n,m,sx,sy,tx,ty大小,起终点 接下来共有2n-1行,奇数行有m-1个数,表示横向的边权,偶数行有m个数,表示纵向的边权 样例输入: 4 4 1 1 ...
- 关于NPOI导入的时候有时出现乱码解决办法
手上这个项目之前客户说过导入的时候回出现乱码问题,一直没用重视,现在自己做做一个功能,乱码经常出现,开始以为是代码的问题,最后百度了试了很多方法猜找到解决办法: 乱码页面如下: 解决办法: 打开IIS ...
- How to Create UML in Markdown
Import yuml class format  Create your own class Person ...
- 「IOI2018」狼人
快咕一个月了 咕咕咕 咕咕咕咕 LOJ #2865 Luogu P4899(离线) UOJ #407(强制在线) 题意 给定一棵树和若干组询问$(S,E,L,R)$ 表示你初始在$S$,想到达$E$, ...
- java笔试要点（java.sql包）
提供JAVA存取数据库能力的包是 ( ) A: java.sql B: java.awt C: java.lang D: java.swing 解析: A,java.sql包提供Java存取数据库能力 ...