原始页面是网页端demo，我从0开始学习，并调整为移动端H5页面。
本文为游戏的loading页面。初始化canvas，加载音乐，背景图片等游戏资源，显示开始游戏按钮。
效果图：
HTML部分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Canvas飞机大战</title> <link rel="stylesheet" href="css/index.css" /> </head> <body> <div class="game"> <div id="gameStart" style="display: none;"> <span id="gs-start">游戏开始</span><br><br> </div> <div class="movebg"></div> <canvas id="canvas" class="showBg">您的浏览器不支持canvas，请更新浏览器</canvas> </div> </body> <script type="text/javascript" src="js/data.js"></script> <script type="text/javascript" src="js/loading.js"></script> <script> //设置canvas的宽高 var canvas = document.getElementById("canvas"); canvas.width = window.screen.width; canvas.height = screen.height; var ctx = canvas.getContext("2d"); //定义 var gS = document.getElementById("gameStart"), gss = document.getElementById("gs-start"); //定时刷新 window.RAF = (function() { return function(callback) { window.setTimeout(callback, 1000/60); }; })(); var stage = { start: function() { this.init(); this.loop(); }, init: function() { var _this = this; this.loading = new Loading(datas, canvas, function() { //datas在data.js中定义 gS.style.display = "block"; canvas.className = "showBg" // document.getElementById("bgm").play(); gss.addEventListener("click", function() { gS.style.display = "none"; // _this.addElement(); }, false) }); }, loop: function() { var _this = this; this.update(); RAF(function() { _this.loop(); }); }, update: function() { var stage = this; var boomnum = 0, misslenum = 0; this.loading.loop(); if(this.loading.getComplete()) { ctx.clearRect(0, 0, canvas.width, canvas.height); } }, }; stage.start(); </script> </html>
loading.js
var Loading = function() { var loadingComplete = false; //是否加载完成状态 var dateCount = null; function init(datas, canvas, callback) { this.canvas = canvas; this.x = this.canvas.width / 2; this.y = this.canvas.height / 2; this.r = 80; this.elew = 10; this.angle = 0; this.percent = 0; this.writePercent = 0;//显示的百分比 this.callback = callback; this.loadImg(datas);//加载图片及音乐 } init.prototype = { loadImg: function(datas) { var _this = this; var dataIndex = 0; li(); function li() { if(datas[dataIndex].indexOf("mp3") >= 0) {//加载音乐 var audio = document.createElement("audio"); audio.preload = "auto"; audio.src = datas[dataIndex]; audio.addEventListener("canplaythrough", loadMp3);//当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时，会发生 canplaythrough 事件 if(datas[dataIndex].indexOf("bgm") >= 0) {//设置背景音乐 audio.id = "bgm"; audio.loop = true; audio.volume = 0.8; } function loadMp3() {//进度 audio.removeEventListener("canplaythrough", loadMp3); dataIndex++; if(dataIndex === datas.length) { _this.percent = 100; } else { _this.percent = parseInt(dataIndex / datas.length * 100); li.call(_this); } document.body.appendChild(audio); } } else { preLoadImg(datas[dataIndex], function() {//进度 dataIndex++; if(dataIndex === datas.length) { _this.percent = 100; } else { _this.percent = parseInt(dataIndex / datas.length * 100); li.call(_this); } }) } } }, paint:function(){ var ctx = this.canvas.getContext("2d"); ctx.fillStyle="rgba(0,0,0,0.01)" //画了个正方形：黑色 透明度0.01 ctx.fillRect(this.x-this.r-this.elew-5 , this.y-this.r-this.elew-5 , (this.r+this.elew+5)*2 , (this.r+this.elew+5)*2) ctx.fillStyle = "#FFF"; ctx.save(); ctx.translate(this.x , this.y);//移到canvas的中心点 ctx.rotate(this.angle);//旋转角度 angle ctx.fillRect(-this.elew/2 , -this.r+this.elew/2 , this.elew , this.elew);//画上下两个起始点，作为loading的开始点；宽高为10px ctx.fillRect(-this.elew/2 , this.r-this.elew/2, this.elew , this.elew); ctx.restore(); ctx.clearRect(this.x-48 , this.y-12 , 96 , 24);//画布中间清除出一块区域放文字 ctx.font = "18px 微软雅黑"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText("加载中"+this.writePercent+"%" , this.x , this.y);//加载文字 this.angle = this.angle>2*Math.PI?0:this.angle+0.05;//弧度+0.05 }, update:function(){ var _this = this; if(dateCount===null){ dateCount = new Date();//获取当前时间 }else { var newd = new Date(); var tc = newd-dateCount;//时间差 if(tc>10){ this.writePercent++; dateCount = newd; if(this.writePercent===100){ setTimeout(function(){ _this.callback(); loadingComplete = true; },500); } } } }, getComplete:function(){ return loadingComplete; }, loop:function(){ if(this.percent !== this.writePercent){ this.update() } if(!loadingComplete) { this.paint(); } }, } return init; }(); function preLoadImg(src , callback){//加载图片 var img = new Image(); img.src = src; img.onload = function(){ callback.call(img); } }
data.js
var datas = [ "image/explosion.png", "image/plasma.png", "image/ship.png", "image/bg_1_1.jpg", "mp3/bgm.mp3", "mp3/boom.mp3", "mp3/shot.mp3" ]
index.css
/*alltag*/ * { padding: 0; margin: 0; overflow: hidden; } .game { width: 100; margin: auto; height: 100%; position: relative; } /*canvas*/ #cas { display: block; border: 1px solid; margin: auto; background-color: #000; } .showBg { background-color: transparent !important; } /*移动背景*/ .movebg { width: 100%; height: 200%; background: url(../image/bg_1_1.jpg); background-size: 100% 50%; position: absolute; top: 0px; transform: translateY(-50%); animation: bganimate 10s infinite linear; z-index: -1; } @keyframes bganimate { from { transform: translateY(-50%); } to { transform: translateY(0); } } /*开始游戏按钮*/ #gameStart { position: absolute; width: 100%; height: 200px; text-align: center; color: #FFF; font: 20px "微软雅黑"; top: 310px; display: none; } #gameStart #gs-start { display: inline-block; width: 180px; height: 60px; background-color: #CCC; color: #000; cursor: pointer; line-height: 60px; border-radius: 10px; border: 5px solid #FFF; } #gameStart #gs-start:hover { color: #f00; }
原文地址：
https://www.cnblogs.com/axes/p/3582843.html