使用了封装了canvas的create.js库来实现的。
最终效果：
工程：
Rect.js
/* * 方块类 */ function Rect(n,color,specialColor){ createjs.Shape.call(this); /** * 设置方块的类型 */ this.setRectType=function(type){ this._RectType=type; switch(type){ case 1: this.setColor(color); break; case 2: this.setColor(specialColor); break; } } /** * 获取方块的类型 */ this.getRectType=function(){ return this._RectType; } /** * 设置方块的颜色+绘制方块 */ this.setColor=function(colorString){ this.graphics.beginFill(colorString); this.graphics.drawRect(0,0,400/n-5,400/n-5); this.graphics.endFill(); } //方块的默认类型是1 this.setRectType(1); } Rect.prototype=new createjs.Shape();
seeColor.js
/** * 绘制舞台 */ var stage=new createjs.Stage("gameView"); var gameView=new createjs.Container(); stage.addChild(gameView); //var s=new createjs.Shape(); //s.graphics.beginFill("#00FF00"); //s.graphics.drawRect(0,0,100,100); //s.graphics.endFill(); //gameView.addChild(s); createjs.Ticker.setFPS(30); createjs.Ticker.addEventListener("tick",stage); //特殊的那个方块的容差 var diffDegree=30; //n*n的矩阵 var n=2; var maxN=7; //在随机生成颜色的时候[0,500] [500,255*255*255]这两个区间内的颜色将被排除 var edgeColor=10; function addRect(){ //随机颜色 var randR=Math.floor(Math.random()*255-edgeColor*2)+edgeColor; var randG=Math.floor(Math.random()*255-edgeColor*2)+edgeColor; var randB=Math.floor(Math.random()*255-edgeColor*2)+edgeColor; //特殊方块的颜色 var specialR=randR-diffDegree>edgeColor?randR-diffDegree:randR+diffDegree; var specialG=randG-diffDegree>edgeColor?randG-diffDegree:randG+diffDegree; var specialB=randB-diffDegree>edgeColor?randB-diffDegree:randB+diffDegree; var color="rgb("+randR+","+randG+","+randB+")"; var specialColor="rgb("+specialR+","+specialG+","+specialB+")"; //特殊方块的位置 var specialX=Math.floor(Math.random()*n); var specialY=Math.floor(Math.random()*n); //绘制所有方块 for(var indexX=0;indexX<n;indexX++){ for(var indexY=0;indexY<n;indexY++){ var r=new Rect(n,color,specialColor); gameView.addChild(r); r.x=indexX; r.y=indexY; if(r.x==specialX && r.y==specialY){ r.setRectType(2); } r.x=indexX*(400/n); r.y=indexY*(400/n); if(r.getRectType()==2){ //点到特殊方块的时候重绘 r.addEventListener("click",function(){ if(n<maxN){ ++n; } gameView.removeAllChildren(); addRect(); }); } } } } addRect();
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>See Color</title>
</head>
<body>
<canvas id="gameView" width="400px" height="400px"></canvas>
<script type="text/javascript" src="js/easeljs-0.8.2.min.js"></script>
<script type="text/javascript" src="js/Rect.js"></script>
<script type="text/javascript" src="js/seeColor.js"></script>
</body>
</html>
github下载地址：https://github.com/BenDanChen/seeColor
参考资料：
极客学院视频教程地址 http://www.jikexueyuan.com/course/167.html
create.js