源码：

<!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. day39-Spring 01-上次课内容回顾

  2. oracle Transactional

    从shutdown transactional命令发布起, 禁止建立任何新的oracle连接. 从shutdown transactional命令发布起,禁止启动任何新的事务. 一旦数据库上所有的活动 ...

  3. 提取网址的python练习

    import urllib, urllib2, cookielib from HTMLParser import HTMLParser import sys reload(sys) sys.setde ...

  4. Convert Sorted Array to Binary Search Tree转换成平衡二查搜索树

    Given an array where elements are sorted in ascending order, convert it to a height balanced BST. 二分 ...

  5. 【JZOJ4833】【NOIP2016提高A组集训第3场10.31】Mahjong

    题目描述 解法 搜索. 代码 #include<stdio.h> #include<iostream> #include<string.h> #include< ...

  6. MySQL运算符和函数

    运算符 1.算数运算符 加(+):mysql> SELECT 1+1; 减(-):mysql> SELECT 3-2; 乘(*):mysql> SELECT 2*3; 除(/):my ...

  7. C++运行时类型识别

    通过运行时类型识别(RTTI),程序能够使用基类的指针或引用来检索这些指针或引用所指对象的实际派生类型. 通过下面两个操作符提供 RTTI: 1. typeid 操作符,返回指针或引用所指对象的实际类 ...

  8. 应用中弹出 WiFi 提示框的方法

    如果 iOS 程序中用到了 WiFi,想有 WiFi 提示,只需要在 .plist 文件中加入如下 Key/Value 即可: 键名:ApplicationusesWi-Fi 值:YES 键名:SBU ...

  9. 前端学习☞jquery

    一 什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 j ...

  10. oralce CUBE

    select id,area,stu_type,sum(score) score from students group by cube(id,area,stu_type) order by id,a ...