使用HTML5 canvas做地图（3）图片加载平移放大缩小

最新推荐文章于 2023-12-15 11:30:00 发布

zxcvbn741

最新推荐文章于 2023-12-15 11:30:00 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/u013052982/article/details/17166865

版权

终于开始可以写代码了，手都开始痒了。这里的代码仅仅是在chrome检测过，我可以肯定的是IE10以下浏览器是行不通，我一直在考虑，是不是使用IE禁止看我的篇博客，就是这群使用IE的人，给我加了很多工作量。

一个地图的基本动作，无非就是加载数据，平移，放大与缩小。这篇博客主要是通过一张图片的方式来模拟一下。

我这里认为大家都稍微了解甚至熟悉canvas的一些API，就不具体说，每一个参数代表什么意思了。

 
         <!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>

 
         var 
         canvas,context;  
        
         function 
         int(){  
        
         canvas=document.getElementById( 
         'canvas' 
         );  
        
         context=canvas.getContext( 
         '2d' 
         );  
        
         }

图片加载

创建一个图片对象之后，图片不能马上绘制到canvas上面，因为图片还没有加载完成。所以我们需要监听图片对象加载完事件，然后再去绘制。

 
         var 
         img, 
         //图片对象  
        
         imgIsLoaded 
         //图片是否加载完成;  
        
         function 
         loadImg(){  
        
         img= 
         new 
         Image();  
        
         img.onload= 
         function 
         (){  
        
         imgIsLoaded= 
         true 
         ;  
        
         //draw image  
        
         }  
        
         img.src= 
         "map.jpg" 
         ;  
        
         }

图片绘制

绘制图像一个函数就可以搞定，但是需要记录这个图像的左上角坐标以及缩放比例。

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

zxcvbn741

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用HTML5 canvas做地图（3）图片加载平移放大缩小

终于开始可以写代码了，手都开始痒了。这里的代码仅仅是在chrome检测过，我可以肯定的是IE10以下浏览器是行不通，我一直在考虑，是不是使用IE禁止看我的篇博客，就是这群使用IE的人，给我加了很多工作量。一个地图的基本动作，无非就是加载数据，平移，放大与缩小。这篇博客主要是通过一张图片的方式来模拟一下。我这里认为大家都稍微了解甚至熟悉canvas的一些API，就不具体说，每
复制链接

扫一扫