学习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 ...
随机推荐
- 【BZOJ4007】[JLOI2015]战争调度(动态规划)
[BZOJ4007][JLOI2015]战争调度(动态规划) 题面 BZOJ 洛谷 题解 神仙题,我是做不来. 一个想法是设\(f[i][j]\)表示当前考虑到\(i\)节点,其子树内有\(j\)个人 ...
- [HNOI/AHOI2018]游戏
题目描述 https://lydsy.com/JudgeOnline/upload/201804/%E6%B9%96%E5%8D%97%E4%BA%8C%E8%AF%95%E8%AF%95%E9%A2 ...
- Docker Dockerfile
镜像的定制实际上就是定制每一层所添加的配置.文件.如果我们可以把每一层修改.安装.构建.操作的命令都写入一个脚本,用这个脚本来构建.定制镜像,那么之前提及的无法重复的问题.镜像构建透明性的问题.体积的 ...
- mysql优化 | 存储引擎,建表,索引,sql的优化建议
个人对于选择存储引擎,建表,建索引,sql优化的一些总结,给读者提供一些参考意见 推荐访问我的个人网站,排版更好看: https://chenmingyu.top/mysql-optimize/ 存储 ...
- bzoj1997 Planar
题目链接 思路 首先以那个环为框架,把所有的边连出来.如果有两条边相交,那么就把其中一条放到环外面去. 如图: \((1,3)\)与\((2,5)相交,\)(1,4)\(与\)(2,5)相交.所以我们 ...
- <02>labSQL的配置和使用方法
任务布置:制作简单地铁站点管理系统<2> 要求一:正确配置系统,建立基本正常的数据通道:要求二:实现地铁站点的登记,拥有查询功能: 正文: 今天介绍labview虚拟仪器软件中 labS ...
- maven的安装教程
一.准备工作 1.确定电脑上已经成功安装jdk7.0以上版本 2.win10操作系统 3.maven安装包 下载 ...
- (二) V4L2引入(含浅析UVC)
title: V4L2引入(含浅析UVC) date: 2019/4/23 19:00:00 toc: true --- V4L2引入(含浅析UVC) 基本框架 V4L2全名是video for li ...
- [译]Ocelot - Quality of Service
原文 可以针对每个ReRoute设置对下游服务的熔断器circuit breaker.这部分是通过Polly实现的. 将下面的配置添加到一个ReRoute下面去. "QoSOptions&q ...
- IntelliJ IDEA 的默认文件编码
建好项目,首先注意改项目默认编码 File->Settings(快捷键Ctrl+Alt+S)->Editor->File Encodings File->Other Setti ...