源码：

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>Canvas动画</title>

</head>

<body>

<div id="canvas-warp">

    <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">

        你的浏览器居然不支持Canvas？！赶快换一个吧！！

    </canvas>

</div>

<script>

    window.onload = function(){

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

        canvas.width = 800;

        canvas.height = 600;

        var context = canvas.getContext("2d");

        context.fillStyle = "#000";

        context.fillRect(0,0,800,600);

        drawOutCircle(context)

        var point = getPoint(200, 400, 300, 240);

        var i = 0;

        drawSmallCircle(context, point[i]);    

        setInterval(function() {

            context.clearRect(10,10,780,580);

            context.fillStyle = "#000";

            context.fillRect(0,0,800,600);

            drawOutCircle(context);

            i++

            if(i == 231) {

                i = 0;

            }

            drawSmallCircle(context, point[i]);

        }, 1000)

    }

    function drawOutCircle(context) {

        context.strokeStyle = "white";

        context.beginPath();

        context.arc(400,300,200,0*Math.PI,2*Math.PI);

        context.stroke();

        context.fillStyle = "yellow";

        context.beginPath();

        context.arc(400,300,100,0*Math.PI,2*Math.PI);

        context.fill();

        context.font = "40px serif";

        context.fillStyle = "black";

        context.fillText('太',400-20,300+20);

    }

    function drawSmallCircle(context, coords) {

        context.fillStyle = "blue";

        context.beginPath();

        context.arc(coords.x,coords.y,30,0*Math.PI,2*Math.PI);

        context.fill();

        context.font = "20px serif";

        context.fillStyle = "black";

        context.fillText('地',coords.x-10,coords.y+10);

    }

    function getPoint(r, ox, oy, count){

        var point = [];

        var radians = (Math.PI / 180) * Math.round(360 / count), //弧度

            i = 0;

        for(; i < count; i++){

            var x = ox + r * Math.sin(radians * i),

                y = oy + r * Math.cos(radians * i);

            point.unshift({x:x,y:y}); //为保持数据顺时针

        }

        return point;

    }

</script>

</body>

</html>

效果图：

学习资料：

1、https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API

2、http://caibaojian.com/canvas/

Canvas动画：地球绕着太阳转的更多相关文章

  1. 玩转html5(五)---月球绕着地球转，地球绕着太阳转（canvas实现，同样可以动哦）

    关于运动速度的参数与真实速度有点差距,大家可以自行调整 <!DOCTYPE html> <html> <head> <meta http-equiv=&quo ...

  2. 开玩笑html5(五岁以下儿童)---绕地球月球，地球绕太阳运动（canvas实现，同样可以移动哦）

    请珍惜劳动小编成果,这篇文章是原来小编,转载请注明出处. 速度的參数与真实速度有点差距.大家能够自行调整 <!DOCTYPE html> <html> <head> ...

  3. canvas动画简单操作

    canvas动画 小球滚动效果 关键api: window.requestAnimationFrame(draw) 会递归调用draw函数,替代setInterval var x = 20; var ...

  4. 16个富有创意的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  5. 16个非常有趣的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  6. 《每周一点canvas动画》——圆周运动

    接<每周一点canvas动画>--波形运动 圆周运动可以分为两种基本的形式:正圆运动和椭圆运动.在讲解圆周运动之前,必不可少的数学公式即将袭来.so,各位骚年们,请护好自己的膝盖.听不懂没 ...

  7. 2015.4.23 贪吃蛇、canvas动画，各种上传工具，url信息匹配以及最全前端面试题等

    1.面向对象贪吃蛇   2.css中:hover 改变图片 页面加载完 第一次鼠标移入会闪一下 这是为啥? 解决方法:你把两张图合成一张图或者是先把图片加载到页面上,然后再hover出来. 解析:图片 ...

  8. HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具

     1.js配合传统css属性控制,可以使用setTimeout或者高级的requestAnimationFrame 2.css3 3.svg 4.canvas(当然,这个还是要配合js)   也许这么 ...

  9. 7 个顶级的 HTML5 Canvas 动画赏析

    HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...

随机推荐

  1. 【JZOJ3824】【NOIP2014模拟9.9】渴

    SLAF 世界干涸,Zyh认为这个世界的人们离不开水,于是身为神的他要将他掌控的仅仅两个水源地放置在某两个不同的城市.这个世界的城市因为荒芜,他们仅仅保留了必要的道路,也就是说对于任意两个城市有且仅有 ...

  2. quarts之Cron表达式示例

    cron表达式含义及范例如下: 字段名                 允许的值                        允许的特殊字符 秒                         0- ...

  3. 洛谷 P1342 请柬 最短路+Dijkstra算法

    目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例 输出样例 说明 思路 AC代码 总结 题面 题目链接 P1342 请柬 题目描述 在电视时代,没有多少人观看戏 ...

  4. 基于OPNET的路由协议仿真教程（AODV、OLSR 、DSR等）

    前言: 目前由于项目需要,学习了基于opnet的网络仿真方法,发现该软件的学习资料少之又少,所以将自己搜集到的学习资料进行整理,希望能帮助后来的人. 主要参考资料:OPNET网络仿真(清华陈敏版) 仿 ...

  5. bzoj1911 特别行动队

    Description Input Output Sample Input 4 -1 10 -20 2 2 3 4 Sample Output 9       斜率优化 推式子 #include< ...

  6. Pyhton 单行、多行注释方法

    一.python单行注释的符号 井号#常被用作单行注释符号,在代码中使用#时,它右边的任何数据都会被忽略,当做是注释.类似c++的// 二.批量.多行注释的符号 多行注释是用三引号: ”’ 注释内容 ...

  7. linux下清除tomcat缓存

    进入tomcat/bin目录下,执行命令:./shutdown.sh 然后执行命令:ps -aux ,查看tomcat是否真的关闭了 如果没有关闭则执行命令:kill -9 #pid来彻底关闭tomc ...

  8. nodejs启本地服务器

    https.js var PORT = 8666;// var http = require('http'); var url=require('url'); var fs=require('fs') ...

  9. 【NS2】ubuntu安装和同时使用不同版本的ns2（转载）

    有时候我们可能会遇到要同时安装两个ns版本的问题,比如我研究wimax/802.16,因为协议太复杂,用的是长庚大学和nist的wimax补丁.长庚大学的wimax补丁是在ns2.29下开发的,nis ...

  10. HDU 1081 To The Max【dp，思维】

    HDU 1081 题意:给定二维矩阵,求数组的子矩阵的元素和最大是多少. 题解:这个相当于求最大连续子序列和的加强版,把一维变成了二维. 先看看一维怎么办的: int getsum() { ; int ...