Use HTML5 canvas for map (3) image loading, translation, amplification, and reduction

<! DOCTYPE html> 
var canvas,context;function int(){    canvas=document.getElementById('canvas');    context=canvas.getContext('2d');}　


 Image loading

 
After creating an image object, the image cannot be drawn to the canvas immediately because the image has not been loaded yet. So we need to listen to the image object loading event and then draw.
Var img, // specifies whether the Image object imgIsLoaded is loaded. function loadImg () {img = new Image (); img. onload = function () {imgIsLoaded = true; // draw image} img. src = "map.jpg ";}


 Image Rendering

 
You can use a function to draw an image, but you need to record the coordinates in the upper left corner of the image and the scaling ratio.
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);}


 Image Translation

 
The minimum granularity of html5 events is on the DOM. Therefore, we cannot monitor images on the canvas, but only canvas.
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    };}


 Image Scaling

 
In fact, scaling is very simple. What is a little complicated is how to make the mouse a center to zoom in or out. If the mathematical ry is not good, the calculation formula may not be clear.
Canvas. onmousewheel = canvas. onwheel = function (event) {// chrome firefox is compatible with 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 ();}
At this time, the basic function is implemented. loading an image is similar to loading multiple images. Maintain the position and size of each image. Let's sort out the code below.
Var canvas, context; var img, // image object imgIsLoaded, // whether the image is loaded successfully; 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 = funct Ion () {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 };}
If you do not want to copy the code, you can gently click here to download it.