特效描述：h5 canvas益智类 填色画游戏代码。h5益智类小游戏，基于canvas填色画图游戏下载。游戏介绍：通过选中色块，来给模型填充颜色。支持多种模型选择填色效果。

代码结构

1. 引入JS

2. HTML代码

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.οnclick=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

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);

//