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" οnclick="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.οnlοad=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);
/// 这里实现了一个渐变的效果，从左上角到右下角的渐变
}

}
}

效果如下

3.这是画的，连连看当然不能用这么丑的，我们来本地加载点

html增加：

var img=new Image();//图片预加载否则显示不出来
img.src="1.jpg"; //加载本地一个图片，这里刚开始我写在onload的js里面，然后一直发现无法实现，查了半小时，问题出在这几行一定要写在外面进行预加载

js增加：

gContext.drawImage(img,picbeginX,picbeginY); 也就是那几行画图的替换成这个这样就能正确的显示图片了，效果如图

接下来就是进行一个个对象构建了

待解决：画布居中问题。。。。

转载于:https://www.cnblogs.com/tester-huang/p/4762500.html

HTML5 从0开始写连连看第一集. 背景图表格绘制相关推荐

html设置%3cbody%3e背景颜色,使用css写带纹理渐变背景图的示例代码
项目中页面长度大概在2000px以上,再加上背景图是带纹理和渐变的,所以加载起来会很大很耗费时间,所以就改用css实现了. 这个网站中有很多现成的背景,也可以自定义背景色,纹样的颜色和透明度. 网站中 ...
使用css写带纹理渐变背景图
项目中页面长度大概在2000px以上,再加上背景图是带纹理和渐变的,所以加载起来会很大很耗费时间,所以就改用css实现了. 这次我们主要用到的网站是Hero Patterns--免费在线纹理素材库这 ...
跟我一起学jQuery——第一集
<锋利的JQuery>第二版阅读笔记-第一章跟我一起学jQuery--第一集 jQuery对象和DOM对象 jQuery的优势与特点 Hello World! jQuery对象和DOM对 ...
Ada 程序设计语言(The Ada Programming Language)[第一集]
Ada 程序设计语言(The Ada Programming Language)[第一集]- - 版权(Copyright) <Ada 程序设计语言>的版权隶属于网站 VenusIC,允许 ...
看萧井陌b站直播第一集的收获，附代码
看了萧井陌在b站直播的录播第一集,收获颇大,遂记录一下: 直播中使用的语言是JavaScript,我之前学web后台的时候,对js有一个简单的了解,因为学过C++和Java,所以看录播的时候虽然有些语 ...
红薯微剧场 | 开源众包发包记第一集 —— 前端篇
开源众包发包记 ---玩转众包第一集巧引外援.顺度难关---前端开发项目篇丁酉年11月,北京的天气已经逐渐寒凉,部分办公司的灯光已熄灭,办公室的窗户上印衬着佳佳略显倦怠的容颜.虽然小风 ...
【深入理解 android telephony 系列第一集初识telephony】
深入理解 android telephony 深入理解 android telephony 系列第一集初识telephony 1. 概述 2. Android Telephony 框架 3. And ...
《并发与高并发系列第一集-基础与概念》
面试官:看你简历上写,最近正在写并发编程方面的博客,是吧? 安琪拉:闲来无事,看看闲书,写写段子,承蒙读者厚爱,有此打算. 面试官:少跟我这拽文,"闲来无事"?阿里不用996吗? ...
从0开始写一个播放器系列-开篇
从0开始写一个播放器系列-开篇阅读本系列博客所需要具备的知识: js, ts , canvas Api , DOM, webpack, 不懂也没有太大的关系, 我会捎带着写出来, 剩下的自行百度第 ...

HTML5 从0开始写连连看第一集. 背景图表格绘制

HTML5 从0开始写连连看第一集. 背景图表格绘制相关推荐

最新文章

热门文章

HTML5 从0开始 写连连看 第一集. 背景图 表格绘制

HTML5 从0开始 写连连看 第一集. 背景图 表格绘制相关推荐

最新文章

热门文章

HTML5 从0开始写连连看第一集. 背景图表格绘制

HTML5 从0开始写连连看第一集. 背景图表格绘制相关推荐