Die Leinwandzeichnung wird entsprechend der Einschluss- oder Abdeckungsmethode angepasst und in der Mitte angezeigt.

Wenn Sie drawImage zum Zeichnen auf Leinwand verwenden, haben die zu zeichnenden Bilder unterschiedliche Größen und Proportionen. Daher sind wie bei HTML + CSS Layout, Inhalt und Abdeckung erforderlich, um unterschiedliche Anforderungen zu erfüllen.

Skalieren Sie das Bild so, dass die lange Seite des Bildes vollständig sichtbar ist und behalten Sie dabei das Seitenverhältnis bei. Mit anderen Worten: Das Bild kann vollständig angezeigt werden.

Wenn das Bild entsprechend dem Einschlussmodus im Rechteck des festen Felds platziert wird, muss das Bild bis zu einem bestimmten Grad skaliert werden.

Das Prinzip ist:

Wenn Breite und Höhe des Bildes nicht gleich sind, sodass die lange Seite des Bildes vollständig angezeigt werden kann, entspricht die Höhenseite des Originalbildes der Seite, die dem festen Feld nach der Skalierung entspricht, und der anderen Seite Seite wird in gleichen Anteilen gefunden.

Wenn Breite und Höhe des Bildes gleich sind, werden Breite und Höhe des skalierten Bildes anhand der Breite und Höhe des festen Felds bestimmt. Wenn die Breite des festen Felds größer als die Höhe ist, wird die Höhe bestimmt Das skalierte Bild entspricht der Höhe der festen Box, und die andere Seite kann entsprechend gefunden werden, und umgekehrt.

 /** * @param {Number} sx feste x-Koordinate der Box, sy feste y-Linksindex der Box* @param {Number} box_w feste Breite der Box, box_h feste Höhe der Box* @param {Number} source_w Originalbildbreite, source_h Höhe des Originalbildes* @return {Object} {Parameter vondrawImage, ) { 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); ctx.fillStyle = '#e1f0ff'; //Position und Größe der Box festlegen – das Bild muss in dieser Box platziert werden ctx.fillRect(30, 30, 150, 200); var img = new Image(); img.onload = function () { console .log( img.width,img.height); var imgRect = includeImg(30,30,150,200,img.width,img.height); console.log('imgRect',imgRect); ctx.drawImage(img, imgRect.dx, ​​​​imgRect.dy, imgRect.dWidth, imgRect.dHeight); //Hinweis: Im IMG-Vorlademodus sollte Onload über dem src zugewiesenen Wert platziert werden, um zu vermeiden, dass das Onload-Ereignis nicht ausgelöst werden kann, wenn bereits ein Cache vorhanden ist, was dazu führt, dass das Ereignis in Onload nicht ausgeführt wird.

Skalieren Sie das Bild unter Beibehaltung des Seitenverhältnisses, sodass nur die kurze Seite des Bildes vollständig sichtbar ist. Das heißt, das Bild ist normalerweise nur in der horizontalen oder vertikalen Richtung vollständig und in der anderen Richtung erfolgt ein Ausschnitt.

Prinzip:

Erfassen Sie einen Teil des Bildes entsprechend dem Verhältnis des festen Rahmens

 /** * @param {Number} box_w feste Boxbreite, box_h feste Boxhöhe* @param {Number} source_w Originalbildbreite, source_h Originalbildhöhe* @return {Object} {abgefangene Bildinformationen}, Entspricht drawImage(imageResource , sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) Parameter*/Funktion 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; } return{ sx, sy, sWidth, sHeight } } var c=document.getElementById(myCanvas); var ctx=c.getContext(2d); ctx.fillStyle = '#e1f0ff'; //Position und Größe des Feldes festlegen ctx .fillRect(30 , 30, 150, 200); var img = new Image() {); console.log(img.width,img.height); var imgRect = coverImg(150,200,img.width,img.height); console.log('imgRect',imgRect); imgRect.sy, imgRect.sWidth, imgRect.sHeight, 30, 30, 150, 200); } img.src = ./timg2.jpg; //Hinweis: Im img-Vorlademodus sollte onload über dem src zugewiesenen Wert platziert werden, um zu verhindern, dass das onload-Ereignis ausgelöst wird, wenn es vorhanden ist bereits ein Cache. Daher werden die Ereignisse im Onload nicht ausgeführt.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.