• 首页

    • 如何在html5的canvas绘制地图

    如题所述

    其他回答
    第1个回答  2017-09-26
    我这里认为大家都稍微了解甚至熟悉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);
    }
    图片平移

    html5事件最小细度在DOM上，所以我们无法对canvas上的图像做监听，只能对canvas监听。

    首先监听鼠标mousedown事件，等事件发生之后，再监听鼠标mousemove事件和mouseup事件
    mousemove事件发生之后，获得鼠标移动的位移，相应的图片的位置改变多少
    mouseup事件发生之后，取消对mousemove以及mouseup事件监听

    canvas.onmousedown=function(event){
    var pos=windowToCanvas(canvas,event.clientX,event.clientY);
    canvas.onmousemove=function(event){
    canvas.style.cursor="move";
    var pos1=windowToCanvas(canvas,event.clientX,event.clientY);
    var x=pos1.x-pos.x;
    var y=pos1.y-pos.y;
    pos=pos1;
    imgX+=x;
    imgY+=y;
    drawImage();
    }
    canvas.onmouseup=function(){
    canvas.onmousemove=null;
    canvas.onmouseup=null;
    canvas.style.cursor="default";
    }
    }

    function windowToCanvas(canvas,x,y){
    var bbox = canvas.getBoundingClientRect();
    return {
    x:x - bbox.left - (bbox.width - canvas.width) / 2,
    y:y - bbox.top - (bbox.height - canvas.height) / 2
    };
    }
    图片缩放

    其实缩放很简单，稍微复杂的是，如何让鼠标成为放大或者缩小的中心。如果数学几何不好，计算公式就可能看不明白了。

    canvas.onmousewheel=canvas.onwheel=function(event){//chrome firefox浏览器兼容
    var pos=windowToCanvas(canvas,event.clientX,event.clientY);
    event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40));
    if(event.wheelDelta>0){
    imgScale*=2;
    imgX=imgX*2-pos.x;
    imgY=imgY*2-pos.y;
    }else{
    imgScale/=2;
    imgX=imgX*0.5+pos.x*0.5;
    imgY=imgY*0.5+pos.y*0.5;
    }
    drawImage();
    }
    这个时候，基本功能就实现了，加载一张图片和加载多张图片都差不多，维护每一张图片的位置和大小，下面来整理一下代码吧。

    var canvas,context;
    var img,//图片对象
    imgIsLoaded,//图片是否加载完成;
    imgX=0,
    imgY=0,
    imgScale=1;

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

    function loadImg(){
    img=new Image();
    img.onload=function(){
    imgIsLoaded=true;
    drawImage();
    }
    img.src="map.jpg";
    }

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

    canvas.onmousedown=function(event){
    var pos=windowToCanvas(canvas,event.clientX,event.clientY);
    canvas.onmousemove=function(event){
    canvas.style.cursor="move";
    var pos1=windowToCanvas(canvas,event.clientX,event.clientY);
    var x=pos1.x-pos.x;
    var y=pos1.y-pos.y;
    pos=pos1;
    imgX+=x;
    imgY+=y;
    drawImage();
    }
    canvas.onmouseup=function(){
    canvas.onmousemove=null;
    canvas.onmouseup=null;
    canvas.style.cursor="default";
    }
    }
    canvas.onmousewheel=canvas.onwheel=function(event){
    var pos=windowToCanvas(canvas,event.clientX,event.clientY);
    event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40));
    if(event.wheelDelta>0){
    imgScale*=2;
    imgX=imgX*2-pos.x;
    imgY=imgY*2-pos.y;
    }else{
    imgScale/=2;
    imgX=imgX*0.5+pos.x*0.5;
    imgY=imgY*0.5+pos.y*0.5;
    }
    drawImage();
    }

    function windowToCanvas(canvas,x,y){
    var bbox = canvas.getBoundingClientRect();
    return {
    x:x - bbox.left - (bbox.width - canvas.width) / 2,
    y:y - bbox.top - (bbox.height - canvas.height) / 2
    };
    第2个回答  2017-09-27
    我这里认为大家都稍微了解甚至熟悉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);
    　　}
    　　图片平移

    　　html5事件最小细度在DOM上，所以我们无法对canvas上的图像做监听，只能对canvas监听。

    　　首先监听鼠标mousedown事件，等事件发生之后，再监听鼠标mousemove事件和mouseup事件
    　　mousemove事件发生之后，获得鼠标移动的位移，相应的图片的位置改变多少
    　　mouseup事件发生之后，取消对mousemove以及mouseup事件监听
    　
    　　canvas.onmousedown=function(event){
    　　var pos=windowToCanvas(canvas,event.clientX,event.clientY);
    　　canvas.onmousemove=function(event){
    　　canvas.style.cursor="move";
    　　var pos1=windowToCanvas(canvas,event.clientX,event.clientY);
    　　var x=pos1.x-pos.x;
    　　var y=pos1.y-pos.y;
    　　pos=pos1;
    　　imgX+=x;
    　　imgY+=y;
    　　drawImage();
    　　}
    　　canvas.onmouseup=function(){
    　　canvas.onmousemove=null;
    　　canvas.onmouseup=null;
    　　canvas.style.cursor="default";
    　　}
    　　}
    　　
    　　function windowToCanvas(canvas,x,y){
    　　var bbox = canvas.getBoundingClientRect();
    　　return {
    　　x:x - bbox.left - (bbox.width - canvas.width) / 2,
    　　y:y - bbox.top - (bbox.height - canvas.height) / 2
    　　};
    　　}
    　　图片缩放

    　　其实缩放很简单，稍微复杂的是，如何让鼠标成为放大或者缩小的中心。如果数学几何不好，计算公式就可能看不明白了。

    　　canvas.onmousewheel=canvas.onwheel=function(event){//chrome firefox浏览器兼容
    　　var pos=windowToCanvas(canvas,event.clientX,event.clientY);
    　　event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40));
    　　if(event.wheelDelta>0){
    　　imgScale*=2;
    　　imgX=imgX*2-pos.x;
    　　imgY=imgY*2-pos.y;
    　　}else{
    　　imgScale/=2;
    　　imgX=imgX*0.5+pos.x*0.5;
    　　imgY=imgY*0.5+pos.y*0.5;
    　　}
    　　drawImage();
    　　}
    　　这个时候，基本功能就实现了，加载一张图片和加载多张图片都差不多，维护每一张图片的位置和大小，下面来整理一下代码吧。

    　　var canvas,context;
    　　var img,//图片对象
    　　imgIsLoaded,//图片是否加载完成;
    　　imgX=0,
    　　imgY=0,
    　　imgScale=1;
    　　
    　　(function int(){
    　　canvas=document.getElementById('canvas');
    　　context=canvas.getContext('2d');
    　　loadImg();
    　　})();
    　　
    　　function loadImg(){
    　　img=new Image();
    　　img.onload=function(){
    　　imgIsLoaded=true;
    　　drawImage();
    　　}
    　　img.src="map.jpg";
    　　}
    　　
    　　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);
    　　}
    　　
    　　canvas.onmousedown=function(event){
    　　var pos=windowToCanvas(canvas,event.clientX,event.clientY);
    　　canvas.onmousemove=function(event){
    　　canvas.style.cursor="move";
    　　var pos1=windowToCanvas(canvas,event.clientX,event.clientY);
    　　var x=pos1.x-pos.x;
    　　var y=pos1.y-pos.y;
    　　pos=pos1;
    　　imgX+=x;
    　　imgY+=y;
    　　drawImage();
    　　}
    　　canvas.onmouseup=function(){
    　　canvas.onmousemove=null;
    　　canvas.onmouseup=null;
    　　canvas.style.cursor="default";
    　　}
    　　}
    　　canvas.onmousewheel=canvas.onwheel=function(event){
    　　var pos=windowToCanvas(canvas,event.clientX,event.clientY);
    　　event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40));
    　　if(event.wheelDelta>0){
    　　imgScale*=2;
    　　imgX=imgX*2-pos.x;
    　　imgY=imgY*2-pos.y;
    　　}else{
    　　imgScale/=2;
    　　imgX=imgX*0.5+pos.x*0.5;
    　　imgY=imgY*0.5+pos.y*0.5;
    　　}
    　　drawImage();
    　　}
    　　
    　　function windowToCanvas(canvas,x,y){
    　　var bbox = canvas.getBoundingClientRect();
    　　return {
    　　x:x - bbox.left - (bbox.width - canvas.width) / 2,
    　　y:y - bbox.top - (bbox.height - canvas.height) / 2
    　　};本回答被提问者采纳

    相关了解……

    你可能感兴趣的内容

    大家正在搜
    相关问题
    html5中如何绘制基本
    如何使用HTML5的Canvas图形元素绘制图形
    如何在 Canvas 中绘制扇形

    本站内容来自于网友发表，不代表本站立场，仅表示其个人看法，不对其真实性、正确性、有效性作任何的担保
    相关事宜请发邮件给我们
    © 非常风气网