HTML5 从0开始 写连连看 第一集. 背景图 表格绘制
主要用到的核心东西就是html5的canvas功能，利用js来实现画图和一系列的操作
1.首先，定义一个画布 并添加了一个单击事件
<body>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="right">
<div class="pw_box_div" onclick="clickCanvas(this,event)" style="margin-left: auto;margin-right: auto;" > //屏幕单击事件
<canvas id="myCanvas" style="margin-left: auto;margin-right: auto;" width="870px" height="610px"></canvas> //定义一个画布
</div>
</td>
</tr>
</table>
</table>
</body>
这样就有了画布，然后对画布展开操作
2、先来画个图玩
首先定义了一个结构体，规定下 每个图片的长宽高，间距，开始x，y
var MyConstants = {
PicWidth : 75,
PicHeight : 75,
PicMargin : 5, //每个图片之间的距离
PicRows :7,
PicCols :10,
BeginX :10, //开始画图的x坐标
BeginY :10, //开始画图的y坐标
}
window.onload=function(){ //一打开网页就加载
var currCanvas = document.getElementById('myCanvas'); //得到画布
gContext = currCanvas.getContext('2d');//得到对象 固定格式
//记录画布相对父元素的位置
nCurrCanvasTop =currCanvas.offsetTop; //得到当前位置的左上角
nCurrCanvasLeft =currCanvas.offsetLeft; //得到当前位置的左上角
nCurrCanvasWidth=currCanvas.width;
nCurrCanvasHeight=currCanvas.height;
//alert(nCurrCanvasTop+" "+nCurrCanvasLeft+" "+nCurrCanvasWidth+" "+nCurrCanvasHeight+" "+gContext);
init(gContext);
}
function init(_context){
var nCurrX = MyConstants.BeginX;//开始绘画的坐标
var nCurrY = MyConstants.BeginY;
//初始化数组
for(var i=0;i<allPicsArray.length;i++){ //先把一个个框都弄成数组，方便后面计算
var colArray= new Array(MyConstants.picCols);
allPicsArray[i]=colArray;
}
backPictures();// 这就是重点 画个图
}
function backPictures(){
var nCurrX = MyConstants.BeginX;//开始绘画的坐标
var nCurrY = MyConstants.BeginY;
var picbeginX;
var picbeginY;
var picendX;
var picendY;
for(var i=0; i<MyConstants.PicCols; i++){
for(var j=0; j<MyConstants.PicRows; j++){
//构造当前图片的信息
picbeginX=MyConstants.BeginX+i*(MyConstants.PicWidth+MyConstants.PicMargin); //数学问题，其实就是从左上角开始一个个定义好一个个图标的起点坐标
picbeginY=MyConstants.BeginY+j*(MyConstants.PicHeight+MyConstants.PicMargin);
picendX=picbeginX+MyConstants.PicWidth;
picendY=MyConstants.BeginY+MyConstants.PicHeight;
//alert("picbeginX=" + picbeginX + ",picbeginY=" + picbeginY + ",picendX=" + picendX + ",picendY=" + picendY);
//var grd=gContext.createLinearGradient(picbeginX,picbeginY,picendX,picendY);
/// 这里实现了一个渐变的效果，从左上角到右下角的渐变
var grd=gContext.createLinearGradient(0,0,870,610);
grd.addColorStop(0,"#FF00FF");
grd.addColorStop(1,"#00FF00");
gContext.fillStyle=grd;
gContext.fillRect(picbeginX,picbeginY,MyConstants.PicWidth,MyConstants.PicHeight);
/// 这里实现了一个渐变的效果，从左上角到右下角的渐变
}
}
}
效果如下
var img=new Image();//图片预加载 否则显示不出来
img.src="1.jpg"; //加载本地一个图片，这里刚开始我写在onload的js里面，然后一直发现无法实现，查了半小时，问题出在 这几行一定要写在外面 进行预加载
js增加：
gContext.drawImage(img,picbeginX,picbeginY); 也就是那几行画图的替换成这个 这样就能正确的显示图片了，效果如图
接下来就是进行一个个对象构建了
待解决：画布居中问题。。。。
