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>