<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>html5 canvas填色画游戏代码</title>
<style>
body{
margin: 0;
padding: 0;
}
#boxRender{
position: relative;
width: 1000px;
margin: auto;
border: 1px solid #e6eaee;
margin-top: 25px;
}
.tool{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
}
.colorSelect{
width: 500px;
height: 500px;
float: left;
box-sizing: border-box;
padding-top: 50px;
}
.colorSelect .item{
width: 40px;
height: 40px;
float: left;
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
margin-bottom: 5px;
}
.imgShowRow{
width: 1000px;
margin: auto;
margin-top: 20px;
height: 100px;
}
.imgShowRow .item{
width: 100px;
height: 100px;
background-size: cover;
background-position: center;
border: 1px solid #e6eaee;
float: left;
position: relative;
overflow: hidden;
margin-left: 32px;
margin-right: 32px;
}
.imgShowRow .item:hover .toolBox{
top: 0%;
transition: all 0.25s linear;
}
.imgShowRow .item .toolBox{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
line-height: 100px;
color: white;
background-color: rgba(0,0,0,0.4);
top: 100%;
left: 0;
transition: all 0.25s linear;
cursor: pointer;
}
#nowSelectColor{
width: 50px;
height: 50px;
position: absolute;
left:-100px;
top: 0;
background-color: #000000;
border: 1px solid #e6eaee;
}
</style>
<script src="HGame.js"></script>
</head>
<body><script src="/demos/googlegg.js"></script>
<div id="boxRender">
<div id="nowSelectColor">
</div>
<div id="colorSelect" class="colorSelect">
</div>
</div>
<div class="imgShowRow">
<div onclick="changeDraw(0)" style=" background-image: url(exp/A.png);" class="item">
<div class="toolBox">汽车</div>
</div>
<div onclick="changeDraw(1)" style=" background-image: url(exp/B.png);" class="item">
<div class="toolBox">蘑菇</div>
</div>
<div onclick="changeDraw(2)" style=" background-image: url(exp/C.png);" class="item">
<div class="toolBox">飞机</div>
</div>
<div onclick="changeDraw(3)" style=" background-image: url(exp/D.png);" class="item">
<div class="toolBox">气球</div>
</div>
<div onclick="changeDraw(4)" style=" background-image: url(exp/E.png);" class="item">
<div class="toolBox">小鸭</div>
</div>
<div onclick="changeDraw(5)" style=" background-image: url(exp/F.png);" class="item">
<div class="toolBox">皮球</div>
</div>
</div>
<script src="data.js" ></script>
<script type="text/javascript">
var canvas = new HGAME.canvas();
var testBox=document.getElementById('boxRender');
testBox.appendChild(canvas.dom);
var animate=new HGAME.animate({
action:function(){
canvas.render();
}
});
var colorObj={
r:0,
g:0,
b:0
};
function initColor(){
var div=null;
var initColor=document.getElementById("colorSelect");
for(var r=0;r<255;r+=65){
for(var b=0;b<255;b+=65){
for(var g=0;g<255;g+=65){
div=document.createElement("div");
div.setAttribute("class","item");
div.setAttribute("data-r",r);
div.setAttribute("data-g",g);
div.setAttribute("data-b",b);
div.style.backgroundColor="rgba("+r+","+g+","+b+","+"1)";
initColor.appendChild(div);
div.onclick=function(){
document.getElementById("nowSelectColor").style.backgroundColor="rgba("+this.getAttribute("data-r")+","+this.getAttribute("data-g")+","+this.getAttribute("data-b")+","+"1)";
colorObj.r=this.getAttribute("data-r");
colorObj.g=this.getAttribute("data-g");
colorObj.b=this.getAttribute("data-b");
}
}
}
}
}
initColor();
/*创建img数据*/
function changeImgColor(img,r,g,b){
var c=document.createElement("canvas");
var txt= c.getContext("2d");
c.width=img.width;
c.height=img.height;
txt.drawImage(img,0,0);
var data=txt.getImageData(0,0, c.width, c.height);
for(var q=0;q<data.data.length;q+=4){
if(data.data[q+3]>100){
data.data[q]=r;
data.data[q+1]=g;
data.data[q+2]=b;
}
}
txt.putImageData(data,0,0);
return c;
}
var div=document.createElement("div");
function changeDraw(num){
/*加载数据*/
var source=new HGAME.source({
loadCall:function(num,allNum){
div.innerHTML="加载资源"+num+"/"+allNum;
div.setAttribute("class","tool");
testBox.appendChild(div);
},
loaded:function(){
testBox.removeChild(div);
var img=new HGAME.Object2D({
img:this.data[0],
w:500,
h:500,
x:0,
y:0
});
canvas.child=new Array();
canvas.add(img);
var THIS = this;
img.child=new Array();
each(this.data,function(intX){
if(intX>=1){
img.add(new HGAME.Object2D({
x:whxyInfo[num][intX-1].x,
y:whxyInfo[num][intX-1].y,
w:whxyInfo[num][intX-1].w,
h:whxyInfo[num][intX-1].h,
img:THIS.data[intX],
isClick:true,
clickFun:function(){
if(typeof this.bufferImg=="undefined"){
this.bufferImg=this.img;
this.img=changeImgColor(this.bufferImg,colorObj.r,colorObj.g,colorObj.b);
}else{
this.img=changeImgColor(this.bufferImg,colorObj.r,colorObj.g,colorObj.b);
}
}
}));
}
});
animate.stop();
animate.run();
},
data:data[num]
});
}
changeDraw(0);
//
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://www.lanrenzhijia.com" target="_blank">懒人</a></p>
</div>
</body>
</html>
html5 canvas填色画游戏代码.zip
版权申诉
57 浏览量
2023-09-26
01:42:24
上传
评论
收藏 562KB ZIP 举报
html5 canvas填色画游戏代码.zip （51个子文件） 
data.js 5KB HGame.js 8KB
exp 
E.png 18KB C.png 22KB F.png 22KB D.png 13KB B.png 19KB A.png 23KB ITEMimg i1 3.png 4KB
ITEM.jpg 58KB 1.png 18KB 6.png 5KB 5.png 2KB 4.png 2KB 7.png 7KB 2.png 4KB i5 3.png 3KB ITEM.jpg 45KB 1.png 6KB 5.png 6KB 4.png 11KB 2.png 2KB i3 3.png 4KB ITEM.jpg 56KB 1.png 5KB 6.png 3KB 5.png 9KB 4.png 2KB 2.png 3KB i4 3.png 5KB ITEM.jpg 35KB 1.png 3KB 5.png 2KB 4.png 4KB 2.png 5KB i2 3.png 4KB 1.png 4KB ietm.jpg 9KB 4.png 4KB 2.png 14KB i6 9.png 4KB 3.png 7KB ITEM.jpg 59KB 1.png 2KB 6.png 6KB 5.png 7KB 4.png 8KB 8.png 3KB 7.png 4KB 2.png 5KB
index.html 6KB资源评论
码云笔记
- 粉丝: 2w+
- 资源: 5845
最新资源
- Springboot集成Netflix-ribbon、Enreka实现负载均衡-源码
- 互联网产品项目管理流程-PPT.ppt
- 互联网大数据分析之《用户画像分析》ppt.ppt
- 毕业设计-基于PyQt5、CV、numpy实现的暗通道先验的方法进行图像去雾python源码+文档说明
- 基于暗通道先验的图像去雾算法，可以通过ESP32-CAM进行图像采集python源码+视频(课程设计)
- 基于Pyortch+python+三种卷积神经实现的深度神经网络的交通标志识别算法python源码+文档说明+数据集
- 深度学习课程设计-基于虚拟仿真环境下的自动驾驶交通标志识别python源码+文档说明+数据+模型权重
- 互联网金融第二章——互联网金融支付-PPT.ppt
- 基于OpenCV实现的交通标志识别C++源码+文档说明+测试图片(课程设计)
- 基于虚拟仿真环境下的自动驾驶交通标志识别python源码+文档说明+截图演示+数据集+使用教学(98分高分毕业设计)
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
