实例介绍
【实例简介】
【实例截图】
【核心代码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
</head>
<body>
<canvas id="demo">
您的浏览器暂时不支持canvas，请升级您的浏览器或者用最新的谷歌浏览器!
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('demo');
// var w = document.body.scrollWidth;
// var h = document.body.scrollHeight-3;
var w = 780
var h = 1334
canvas.width = w;
canvas.height = h;
canvas.style.border = "1px solid #ccc";
var ctx = canvas.getContext("2d");
const Star = 0;// 第一阶段:欢迎阶段
const Load = 1;// 第二阶段:过渡动画阶段
const Play = 2;
const Over = 3;
//背景图
var state = Star;
const WIDTH = canvas.width;
const HEIGHT = canvas.height;
var image = new Image();
image.src = "./images/bj.jpg";
//这是新加的图片
//背景有三张吗
//
var imgess = [];
imgess[0] =new Image();
imgess[0].src = 'images/bg_01.png';
imgess[1] =new Image();
imgess[1].src = 'images/01.jpg';
var x =0,y=0;
//就是因为这个才导致图片不切换，不能用这个img.loading
// image.onload=function(){
// ctx.drawImage(image,x,y,w,h);
// }
// 我偷懒了，用了比较笨的方法
var num = 0;
function bjs() {
if(num == 0){
ctx.drawImage(image,x,y,w,h);
}else if(num == 1){
ctx.drawImage(imgess[0],x,y,w,h);
}else if(num == 2){
ctx.drawImage(imgess[1],x,y,w,h);
}
}
//加载主页图片
var loadings = [];
loadings[1] = new Image();
loadings[1].src = "images/btn_01.png";
loadings[2] = new Image();
loadings[2].src = "images/img_05.png";
function bj(){
ctx.drawImage(loadings[2],w/6.4,h/1.6);
ctx.drawImage(loadings[1],w/3.4,h/1.14);
}
canvas.onclick = function(){
if(state == Star){
state = Load;
}
}
//筷子
var imges = [];
imges[0] = new Image();
imges[0].src = "images/img_01.png";
imges[1] = new Image();
imges[1].src = "images/img_02.png";
imges[2] = new Image();
imges[2].src = "images/btn_01.png";
imges[3] = new Image();
imges[3].src = "images/btn_02.png";
imges[4] = new Image();
imges[4].src = "images/img_05.png";
imges[5] = new Image();
imges[5].src = "images/img_03.png";
imges[6] = new Image();
imges[6].src = "images/img_04.png";
var text = '10';
var ls = 0;
//然后用这个来控制上面的num
function heroo2(){
if(ls>=20&&ls<=30){
ctx.drawImage(imges[0],0,h/5);
ctx.drawImage(imges[2],w/3.4,h/1.14);
ctx.drawImage(imges[4],w/6.2,h/1.6);
num == 1;
}else if(ls>30&ls<=40){
ctx.drawImage(imges[1],0,h/5);
ctx.drawImage(imges[3],w/4.4,h/1.15);
num == 2;
}else if(ls>40&&ls<=50){
ctx.drawImage(imges[5],w/6.2,h/1.6);
ctx.drawImage(imges[1],0,h/1.6);
ctx.drawImage(imges[2],w/3.4,h/1.14);
}else if(ls>50&ls<=60){
ctx.drawImage(imges[6],w/6.2,h/1.6);
num == 0;
ctx.drawImage(imges[3],w/4.4,h/1.15);
ctx.drawImage(imges[4],w/6.2,h/1.6);
}else if(ls>60&ls<=70){
ctx.drawImage(imges[6],w/6.2,h/1.6);
ctx.drawImage(imges[3],w/4.4,h/1.15);
ctx.drawImage(imges[4],w/6.2,h/1.6);
}else{
if(state == Load){
state == Star;
ctx.drawImage(imges[4],w/6.2,h/1.6);
ctx.drawImage(imges[2],w/3.4,h/1.14);
}
//如果等于Play了
//就新建一个数组用来存7个随机的图片，
//写个函数拿取随机的下标，最后在用canvas绘制，
}
ls ;
}
// var longing = [];
// longing[0] = new Image();
// longing[0].src = "images/什么也没有.png";
// longing[1] = new Image();
// longing[1].src = "images/杜蕾斯.png";
// longing[2] = new Image();
// longing[2].src = "images/假发.png";
// longing[3] = new Image();
// longing[3].src = "images/尖叫鸡.png";
// longing[4] = new Image();
// longing[4].src = "images/金针菇.png";
// longing[5] = new Image();
// longing[5].src = "images/辣椒.png";
// longing[6] = new Image();
// longing[6].src = "images/金币.png";
// var HERO1 = {
// 'i':0,
// 'tops':-200,
// 'num':0,
// 'scale':1,
// s:400,
// dao:1,
// day:0
// }
// var nums = 0;
// function op(){
// if(nums%50==0){
// var aircraft = new Aircraft(loadImg);
// loadImg[loadImg.length] = aircraft;
// console.log(1)
// }
// nums ;
// }
// function poresDraw(){
// (function(){
// for(var i=0;i<arrs.length;i ){
// if(arrs[i]){
// arrs[i].draw();
// }
// }
// }());
// }
//定时器
function time(){
var timer = setTimeout(function(){
(function(){
bjs();
switch(state){
case Star:
bj(loadings);
break;
case Load:
heroo2(imges);
break;
case Play:
op();
poresDraw();
break;
}
}());
clearInterval(timer);
timer = null;
time();
},10);
}
time();
</script>
</body>
</html>
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论