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/
Canvas动画：地球绕着太阳转

猜你喜欢
