zoukankan      html  css  js  c++  java
  • Canvas动画:地球绕着太阳转

    源码:

    <!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>
    View Code

    效果图:

    学习资料:

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

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

  • 相关阅读:
    .NET牛人应该知道些什么
    ASP.NET常用的分页
    获取字符串长度
    去掉网页的滚动条
    GridView动态生成字段常见问题及解决方法
    PagesSection.ValidateRequest 属性
    我刚刚做了一个艰难的决定
    Jquery UI Dialog 对话框学习
    c语言病毒分析(转)
    不用不熟悉的工具和方法
  • 原文地址:https://www.cnblogs.com/fengyuexuan/p/11944899.html
Copyright © 2011-2022 走看看