canvas的2个例子

以前看过一个gif动图，有点意思，就用canvas做了一个，

第二个是参照了MDN上教程里的一个例子，更改了一点

<!DOCTYPE html>
<html lang='zh-cmn-Hans'>
<head>
<meta charset='utf-8' />
<title>HTML5 - Canvas</title>
<style type="text/css">
canvas { background: #000;}
</style>
</head>

<body>
<h1>HTML5 - Canvas</h1>
<canvas id='ss-canvas' width='600' height='600'></canvas>
<canvas id='canvas' width='600' height='600'></canvas>
<script type="text/javascript">
window.onload = function(){
    ss();
    init();
    var sscanvas = document.getElementById('ss-canvas');
    sscanvas.addEventListener('click', function(){
        gc();
    })
}

var re = 280, rm = 180, t=0;
var speed_e = 2, speed_m = 4.5; //改变数值试试
var pe = [], pm = [];
var go = false;
var gst;
function ss() {
    var canvas = document.getElementById('ss-canvas');
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, 600, 600);
    ctx.strokeStyle = '#c00';
    ctx.fillStyle = '#c00';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.arc(300, 300, 30, 0, 2*Math.PI, false); //中心球体
    ctx.fill();

    pe.push([ 300 + re*Math.cos(t*speed_e/50), 300 + re*Math.sin(t*speed_e/50) ]);
    pm.push([ 300 + rm*Math.cos(t*speed_m/50), 300 + rm*Math.sin(t*speed_m/50) ]);

    ctx.lineWidth = 1;
    for (var i = 0; i < pe.length-1; i++) {
        ctx.strokeStyle = '#789';
        ctx.beginPath();
        ctx.moveTo(pe[i][0], pe[i][1]);
        ctx.lineTo(pm[i][0], pm[i][1]);
        ctx.stroke();
    }
    ctx.lineWidth = 3;
    ctx.strokeStyle = '#ff0';
    ctx.beginPath();
    ctx.moveTo(pe[t][0], pe[t][1]);
    ctx.lineTo(pm[t][0], pm[t][1]);
    ctx.stroke();

    ctx.lineWidth = 1;
    ctx.strokeStyle = '#666';
    ctx.beginPath();
    ctx.arc(300, 300, rm, 0, 2*Math.PI, false); //轨道1
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(300, 300, re, 0, 2*Math.PI, false); //轨道2
    ctx.stroke();

    ctx.beginPath();
    ctx.fillStyle = '#00c';
    ctx.arc(pe[t][0], pe[t][1], 5, 0, 2*Math.PI, false); //轨道1球体
    ctx.fill();
    ctx.beginPath();
    ctx.fillStyle = '#93c';
    ctx.arc(pm[t][0], pm[t][1], 5, 0, 2*Math.PI, false); //轨道2球体
    ctx.fill();

    if (t++ < 600) {
        go = true;
        gst = setTimeout(ss, 10)
    } else {
        ctx.clearRect(0, 0, 600, 600);
        ctx.lineWidth = 1;
        for (var i = 0; i < pe.length; i++) {
            ctx.strokeStyle = '#789';
            ctx.beginPath();
            ctx.moveTo(pe[i][0], pe[i][1]);
            ctx.lineTo(pm[i][0], pm[i][1]);
            ctx.stroke();
        }
        go = false;
        t = 0;
        pe = [], pm = [];
    }
    ctx.fillStyle = 'rgb(0, 255, 0)';
    ctx.fillText(Math.floor(t/10), 550, 580);
}
function gc() {
    if (go) {
        clearTimeout(gst)
    } else {
        gst = setTimeout(ss, 10);
    }
    go = !go;
}
function draw(t) {
    var time = new Date();
    ctx.save();
    ctx.scale(1.5,1.5);
    ctx.drawImage(sun, 0, 0);
    var xe = 150+100*Math.cos(time.getSeconds()*Math.PI/30+time.getMilliseconds()*Math.PI/30000);
    var ye = 150+100*Math.sin(time.getSeconds()*Math.PI/30+time.getMilliseconds()*Math.PI/30000);
    ctx.translate(xe, ye); //公转，坐标
    ctx.save();
    ctx.rotate(time.getSeconds()*Math.PI/10+time.getMilliseconds()*Math.PI/10000); //自转，旋转
    ctx.drawImage(earth,-12,-12);

    ctx.restore();
    var xm = 25*Math.cos(time.getSeconds()*Math.PI/3+time.getMilliseconds()*Math.PI/3000);
    var ym = 25*Math.sin(time.getSeconds()*Math.PI/3+time.getMilliseconds()*Math.PI/3000);
    ctx.translate(xm, ym);
    ctx.save();
    ctx.rotate(time.getSeconds()*Math.PI/3+time.getMilliseconds()*Math.PI/3000);
    ctx.drawImage(moon,-3.5,-3.5);

    ctx.restore();
    ctx.restore();
    window.requestAnimationFrame(draw);
}
var sun = new Image(),
    moon = new Image(),
    earth = new Image();
var ctx;
function init(){
    ctx = document.getElementById('canvas').getContext('2d');
    sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
    moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
    earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
    window.requestAnimationFrame(draw);
}
</script>

</body>

</html>

 

posted on 2017-03-06 16:46  余之乐  阅读(327)  评论(0)    收藏  举报

导航