终于开始可以写代码了,手都开始痒了。这里的代码仅仅是在chrome检测过,我可以肯定的是IE10以下浏览器是行不通,我一直在考虑,是不是使用IE禁止看我的篇博客,就是这群使用IE的人,给我加了很多工作量。
一个地图的基本动作,无非就是加载数据,平移,放大与缩小。这篇博客主要是通过一张图片的方式来模拟一下。
我这里认为大家都稍微了解甚至熟悉canvas的一些API,就不具体说,每一个参数代表什么意思了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
'utf-8'
>
<title>图片加载平移放大缩小示例</title>
<style>
html,body{
margin:0px;
padding:0px;
}
canvas{
border: 1px solid
#000;
}
</style>
</head>
<body>
<canvas id=
"canvas"
width=
"800"
height=
"800"
></canvas>
<script type=
"text/javascript"
src=
"main.js"
></script>
</body>
</html>
|
1
2
3
4
5
|
var
canvas,context;
function
int(){
canvas=document.getElementById(
'canvas'
);
context=canvas.getContext(
'2d'
);
}
|
图片加载 |
创建一个图片对象之后,图片不能马上绘制到canvas上面,因为图片还没有加载完成。所以我们需要监听图片对象加载完事件,然后再去绘制。
1
2
3
4
5
6
7
8
9
10
|
var
img,
//图片对象
imgIsLoaded
//图片是否加载完成;
function
loadImg(){
img=
new
Image();
img.onload=
function
(){
imgIsLoaded=
true
;
//draw image
}
img.src=
"map.jpg"
;
}
|
图片绘制 |
绘制图像一个函数就可以搞定,但是需要记录这个图像的左上角坐标以及缩放比例。
1
2
3
4
5
|
var
imgX,imgY,imgScale;
function
drawImage(){
context.clearRect(0,0,canvas.width,canvas.height);
context.drawImage(img,0,0,img.width,img.height,imgX,imgY,img.width*imgScale,img.height*imgScale);
}
|