Shulou(Shulou.com)06/01 Report--

This article is to share with you about how to configure and center canvas drawings. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Canvas drawing drawImage, need to draw pictures of different sizes, different proportions, so like the html+css layout, need contain and cover to meet different needs.

Contain

Keep the aspect ratio to zoom the picture so that the long edge of the picture can be fully displayed. In other words, the picture can be displayed completely.

If the picture is placed in the rectangle of the fixed box according to the contain mode, the picture needs to be scaled to a certain extent.

The principle is:

If the width and height of the picture are different, so that the long edge of the picture can be fully displayed, the high side of the original picture is scaled equal to the corresponding side of the fixed box, and the other side is calculated in proportion.

If the width and height of the picture are equal, the width and height of the scaled picture is determined according to the width and height of the fixed box, and the width of the fixed box is larger than the height, then the height of the scaled picture is equal to the height of the fixed box, and the other side can be found accordingly, and vice versa.

/ * @ param {Number} sx fixed box x coordinate, y left label of sy fixed box * @ param {Number} box_w fixed box width, box_h fixed box height * @ param {Number} source_w original picture width, source_h original picture height * @ return {Object} {drawImage parameter, x coordinate, y coordinate of the scaled picture Width and height}, corresponding to drawImage (imageResource, dx, dy, dWidth, dHeight) * / function containImg (sx, sy, box_w, box_h, source_w, source_h) {var dx = sx, dy = sy, dWidth = box_w, dHeight = box_h If (source_w > source_h | | (source_w = = source_h & & box_w)

< box_h)){ dHeight = source_h*dWidth/source_w; dy = sy + (box_h-dHeight)/2; }else if(source_w < source_h || (source_w == source_h && box_w >

Box_h) {dWidth = source_w*dHeight/source_h; dx = sx + (box_w-dWidth) / 2;} return {dx, dy, dWidth, dHeight}} var c=document.getElementById ("myCanvas") Var ctx=c.getContext ("2d"); ctx.fillStyle ='# e1f0ffsize; / / fix the location and size of the box-the picture needs to be placed in this box ctx.fillRect (30,30,150,200); var img = new Image (); img.onload = function () {console.log (img.width,img.height) Var imgRect = containImg; console.log ('imgRect',imgRect); ctx.drawImage (img, imgRect.dx, imgRect.dy, imgRect.dWidth, imgRect.dHeight);} img.src = ". / timg2.jpg" / Note: in img preload mode, onload should be placed above the value assigned to src to avoid the occurrence of onload events that cannot be triggered in the case of existing cache, resulting in non-execution of events in onload.

Cover

Keep the aspect ratio to scale the picture, only ensuring that the short edge of the picture can be fully displayed. In other words, the picture is usually complete only in the horizontal or vertical direction, and the other direction will be intercepted.

Principle:

Intercept the part of the picture according to the proportion of the fixed box:

/ * * @ param {Number} box_w fixed box width, box_h fixed box height * @ param {Number} source_w original picture width, source_h original picture height * @ return {Object} {intercepted picture information} Corresponding to drawImage (imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) parameters * / function coverImg (box_w, box_h, source_w, source_h) {var sx = 0, sy = 0, sWidth = source_w, sHeight = source_h If (source_w > source_h | | (source_w = = source_h & & box_w)

< box_h)){ sWidth = box_w*sHeight/box_h; sx = (source_w-sWidth)/2; }else if(source_w < source_h || (source_w == source_h && box_w >

Box_h) {sHeight = box_h*sWidth/box_w; sy = (source_h-sHeight) / 2;} return {sx, sy, sWidth, sHeight}} var c=document.getElementById ("myCanvas") Var ctx=c.getContext ("2d"); ctx.fillStyle ='# e1f0ffsize; / / fix the location and size of the box-the picture needs to be placed in this box ctx.fillRect (30,30,150,200); var img = new Image (); img.onload = function () {console.log (img.width,img.height) Var imgRect = coverImg; console.log ('imgRect',imgRect); ctx.drawImage (img, imgRect.sx, imgRect.sy, imgRect.sWidth, imgRect.sHeight, 30,30,150 timg2.jpg);} img.src = ". / height" / Note: in img preload mode, onload should be placed above the value assigned to src to avoid the occurrence of onload events that cannot be triggered by existing caches, resulting in non-execution of events in onload. Thank you for reading! This is the end of this article on "how to configure and center canvas drawings". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.