El dibujo del lienzo se adapta y se muestra en el centro según el método de contener o cubrir.

Cuando se utiliza drawImage para dibujar lienzos, las imágenes que se van a dibujar son de diferentes tamaños y proporciones, por lo que, al igual que el diseño html + css, se necesitan contenido y cobertura para satisfacer diferentes necesidades.

Escale la imagen para que el lado largo de la imagen sea completamente visible manteniendo la relación de aspecto. En otras palabras, la imagen se puede mostrar por completo.

Si la imagen se coloca en el rectángulo del cuadro fijo según el modo de contención, la imagen debe escalarse hasta cierto punto.

El principio es:

Si el ancho y el alto de la imagen no son iguales, de modo que el lado largo de la imagen se pueda mostrar completamente, entonces el lado alto de la imagen original será igual al lado correspondiente al cuadro fijo después de escalar, y el otro Los lados se encontrarán en proporciones iguales.

Si el ancho y el alto de la imagen son iguales, el ancho y el alto de la imagen escalada se determinarán de acuerdo con el ancho y el alto del cuadro fijo. Si el ancho del cuadro fijo es mayor que la altura, entonces la altura de. la imagen escalada será igual a la altura del cuadro fijo, y el otro lado se podrá encontrar correspondientemente, y viceversa.

 /** * @param {Número} sx coordenada x fija del cuadro, sy fijo y subíndice izquierdo del cuadro* @param {Número} box_w ancho fijo del cuadro, box_h alto fijo del cuadro* @param {Número} source_w imagen original Ancho, source_h altura de la imagen original* @return {Objeto} {parámetros de drawImage, coordenada x, coordenada y, ancho y alto de la imagen escalada}, correspondientes a drawImage(imageResource, dx, dy, dWidth, dHeight) */ función contieneImg(sx, sy, box_w, box_h, source_w, source_h ) { var dx = sx, dy = sy, dAncho = caja_w, dAltura = caja_h; if(fuente_w > fuente_h || (fuente_w == fuente_h && box_w < box_h)){ dHeight = fuente_h*dWidth/source_w; dy = sy + (box_h-dHeight)/2; == fuente_h && caja_w > caja_h)){ dAncho = source_w*dHeight/source_h; dx = sx + (box_w-dWidth)/2; } return{ dx, dy, dWidth, dHeight } var c=document.getElementById(myCanvas); ctx.fillStyle = '#e1f0ff'; //Corrige la posición y el tamaño del cuadro: la imagen debe colocarse en este cuadro ctx.fillRect(30, 30, 150, 200); var img = new Image(); .log( img.ancho,img.alto); var imgRect = contieneImg(30,30,150,200,img.ancho,img.alto); console.log('imgRect',imgRect); ctx.drawImage(img, imgRect.dx, ​​​​imgRect.dy, imgRect.dWidth, imgRect.dHeight } img.src = ./timg2.jpg); //Nota: en el modo de precarga de img, onload debe colocarse encima del valor asignado a src para evitar que el evento onload no pueda activarse cuando ya existe un caché, lo que provocará que el evento onload no se ejecute.

Escale la imagen manteniendo la relación de aspecto para que solo el lado corto de la imagen sea completamente visible. Es decir, la imagen suele estar completa sólo en dirección horizontal o vertical, y el recorte se producirá en la otra dirección.

principio:

Capture parte de la imagen según la proporción del cuadro fijo.

 /** * @param {Número} box_w ancho de cuadro fijo, box_h alto de cuadro fijo* @param {Número} source_w ancho de imagen original, source_h alto de imagen original* @return {Objeto} {información de imagen interceptada}, correspondiente a drawImage(imageResource , sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) parámetros*/ función 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 *sAltura/caja_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; sx, sy, sAncho, sAlto } } var c=document.getElementById(myCanvas); var ctx=c.getContext(2d); ctx.fillStyle = '#e1f0ff'; //Fija la posición y el tamaño del cuadro; la imagen debe colocarse en este cuadro ctx .fillRect(30, 30, 150, 200); var img = nueva Imagen(); img.onload = función () { console.log(img.width,img.height); var imgRect = coverImg(150,200,img.width,img.height); console.log('imgRect',imgRect(img, imgRect.sx, imgRect.sy, imgRect.sWidth, imgRect.sHeight, 30, 30, 150, 200); } img.src = ./timg2.jpg; //Nota: en el modo de precarga de img, onload debe colocarse encima del valor asignado a src para evitar que el evento de carga no pueda activarse cuando hay ya es un caché. Como resultado, los eventos en carga no se ejecutan.

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.