大家好，感谢邀请，今天来为大家分享一下在线制图网站源码分享自带api的问题，以及和制作图网址的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！
一、canvas简介
canvas是HTML5提供的一种新标签,双标签;HTML5canvas标签元素用于图形的绘制，通过脚本(通常是JavaScript)来完成;canvas标签只是图形容器，必须使用脚本来绘制图形;
Canvas是一个矩形区域的画布，可以用JavaScript在上面绘画;
二、案例目标
我们今天的目标是使用HTML5画布技术制作一款拼图小游戏，要求将图像划分为3*3的9块方块并打乱排序，用户可以移动方块拼成完整图片。
效果如下所示:
三、程序流程
3.1HTML静态页面布局
<divid=&34;>\n<!–页面标题–>\n<h3>HTML5画布综合项目之拼图游戏</h3>\n<!–水平线–>\n<hr/>\n<!–游戏内容–>\n<!–游戏时间–>\n<divid=&34;>\n共计时间：<spanid=&34;>00:00:00</span>\n</div>\n<!–游戏画布–>\n<canvasid=&34;width=&34;height=&34;style=&34;>\n对不起，您的浏览器不支持HTML5画布API。\n</canvas>\n<!–游戏按钮–>\n<div>\n<buttononclick=&34;>\n重新开始\n</button>\n</div>\n</div>
效果如下所示:
我们可以看到页面的大致结构是已经显现出来了,就是骨架已经搭建好了,现在我们要使用css强化样式;
3.2CSS打造页面样式
整体背景设置
body{\nbackground-color:silver;/*设置页面背景颜色为银色*/\n}
游戏界面样式设置
timeBox{\nmargin:10px0;\nfont-size:18px;\n}
游戏按钮样式设置
button{\nwidth:200px;\nheight:50px;\nmargin:10px0;\nborder:0;\noutline:none;\nfont-size:25px;\nfont-weight:bold;\ncolor:white;\nbackground-color:lightcoral;\n}
鼠标悬浮时的按钮样式设置
button:hover{\nbackground-color:coral;\n}
设置好界面整体样式之后我们得到完整的界面,如下所示:
可以看到整体的静态界面已经搭建出来了
3.3js构建交互效果
3.3.1对象的获取以及图片的设置
目标对象的获取
varc=document.getElementById(&39;);//获取画布对象\nvarctx=c.getContext(&39;);//获取2D的context对象
声明拼图的图片素材来源
varimg=newImage();\nimg.src=&34;;\n\nimg.onload=function(){//当图片加载完毕时\ngenerateNum();//打乱拼图的位置\ndrawCanvas();//在画布上绘制拼图\n}
3.3.2初始化拼图
需要将素材图片分割成3行3列的9个小方块，并打乱顺序放置在画布上;为了在游戏过程中便于查找当前的区域该显示图片中的哪一个方块，首先为原图片上的9个小方块区域进行编号;
定义初始方块位置
varnum=[[00,01,02],[10,11,12],[20,21,22]];
打乱拼图的位置
functiongenerateNum(){//循环50次进行拼图打乱\nfor(vari=0;i<50;i++){\n//随机抽取其中一个数据\nvari1=Math.round(Math.random()*2);\nvarj1=Math.round(Math.random()*2);\n//再随机抽取其中一个数据\nvari2=Math.round(Math.random()*2);\nvarj2=Math.round(Math.random()*2);\n//对调它们的位置\nvartemp=num[i1][j1];\nnum[i1][j1]=num[i2][j2];\nnum[i2][j2]=temp;\n}\n}
绘制拼图
自定义名称的drawCanvas()方法用于在画布上绘制乱序后的图片;
functiondrawCanvas(){\n//清空画布\nctx.clearRect(0,0,300,300);\n//使用双重for循环绘制3×3的拼图\nfor(vari=0;i<3;i++){\nfor(varj=0;j<3;j++){\nif(num[i][j]!=22){\n//获取数值的十位数，即第几行\nvarrow=parseInt(num[i][j]/10);\n//获取数组的个位数，即第几列\nvarcol=num[i][j]%10;\n//在画布的相关位置上绘图\nctx.drawImage(img,col*w,row*w,w,w,j*w,i*w,w,w);//w:300/3=100(小图宽度)\n}\n}\n}\n}
如下所示:
3.3.3事件绑定
监听鼠标监听事件
c.onmousedown=function(e){\nvarbound=c.getBoundingClientRect();//获取画布边界\n\nvarx=e.pageX-bound.left;//获取鼠标在画布上的坐标位置(x,y)\nvary=e.pageY-bound.top;\n\n\nvarrow=parseInt(y/w);//将x和y换算成几行几列\nvarcol=parseInt(x/w);\n\n\n\nif(num[row][col]!=22){//如果当前点击的不是空白区域\ndetectBox(row,col);//移动点击的方块\ndrawCanvas();//重新绘制画布\nvarisWin=checkWin();//检查游戏是否成功\n\nif(isWin){//如果游戏成功\nclearInterval(timer);//清除计时器\nctx.drawImage(img,0,0);//绘制完整图片\nctx.font=&34;;//设置字体为加粗、68号字，serif\nctx.fillStyle=&34;;//设置填充色为红色\nctx.fillText(&34;,20,150);//显示提示语句\n}\n}\n}
点击方块移动
functiondetectBox(i,j){\n//如果点击的方块不在最上面一行\nif(i>0){\n//检测空白区域是否在当前方块的正上方\nif(num[i-1][j]==22){\n//交换空白区域与当前方块的位置\nnum[i-1][j]=num[i][j];\nnum[i][j]=22;\nreturn;\n}\n}\n//如果点击的方块不在最下面一行\nif(i<2){\n//检测空白区域是否在当前方块的正下方\nif(num[i+1][j]==22){\n//交换空白区域与当前方块的位置\nnum[i+1][j]=num[i][j];\nnum[i][j]=22;\nreturn;\n}\n}\n//如果点击的方块不在最左边一列\nif(j>0){\n//检测空白区域是否在当前方块的左边\nif(num[i][j-1]==22){\n//交换空白区域与当前方块的位置\nnum[i][j-1]=num[i][j];\nnum[i][j]=22;\nreturn;\n}\n}\n//如果点击的方块不在最右边一列\nif(j<2){\n//检测空白区域是否在当前方块的右边\nif(num[i][j+1]==22){\n//交换空白区域与当前方块的位置\nnum[i][j+1]=num[i][j];\nnum[i][j]=22;\nreturn;\n}\n}\n}
3.3.4游戏计时
自定义函数getCurrentTime()用于进行游戏计时；functiongetCurrentTime(){s=parseInt(s);//将时分秒转换为整数以便进行自增或赋值m=parseInt(m);h=parseInt(h);s++;//每秒变量s先自增1if(s==60){s=0;//如果秒已经达到60，则归0m++;//分钟自增1}if(m==60){m=0;//如果分钟也达到60，则归0h++;//小时自增1}//修改时分秒的显示效果，使其保持两位数if(s<10)s=&34;+s;if(m<10)m=&34;+m;if(h<10)h=&34;+h;time.innerHTML=h+&34;+m+&34;+s;//将当前计时的时间显示在页面上}在JavaScript中使用setInterval()方法每隔1秒钟调用getCurrentTime()方法一次，以实现更新效果;vartimer=setInterval(&34;,1000);
3.3.5游戏成功与重新开始
游戏成功判定与显示效果的实现
自定义函数checkWin()用于进行游戏成功判断;
functionrestartGame(){\nclearInterval(timer);//清除计时器\ns=0;//时间清零\nm=0;\nh=0;\ngetCurrentTime();//重新显示时间\ntimer=setInterval(&34;,1000);\n\ngenerateNum();//重新打乱拼图顺序\ndrawCanvas();//绘制拼图\n\n}
如果成功则使用clearInterval()方法清除计时器。然后在画布上绘制完整图片，并使用fillText()方法绘制出“游戏成功”的文字图样;if(isWin){//如果游戏成功clearInterval(timer);//清除计时器ctx.drawImage(img,0,0);//绘制完整图片ctx.font=&34;;//设置字体为加粗、68号字，serifctx.fillStyle=&34;;//设置填充色为红色ctx.fillText(&34;,20,150);//显示提示语句}
3.4最终效果演示
静态效果如上所示,至于游戏成功这里伙计们可以自行操作;
四、总结
本次案例我们使用HTML5的新特性canvas画布标签打造了简单的9宫格拼图游戏,总体来说没有特别的复杂,主要是图片的分割方块移动事件的绑定,以及重新游戏的初始化操作,明确了游戏逻辑之后其实代码的编写其实不难。感兴趣的小伙伴可以去尝试一下。
关于在线制图网站源码分享自带api和制作图网址的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。