Рисунок холста адаптируется и отображается в центре в соответствии с методом содержания или покрытия.

При использовании drawImage для рисования на холсте рисуемые изображения имеют разные размеры и пропорции, поэтому, как и в случае с макетом html+css, для удовлетворения различных потребностей необходимы элементы содержимого и покрытия.

Масштабируйте изображение так, чтобы длинная сторона изображения была полностью видна, сохраняя при этом соотношение сторон. Другими словами, картинку можно отобразить полностью.

Если изображение помещено в прямоугольник фиксированного блока в соответствии с режимом содержания, изображение необходимо масштабировать в определенной степени.

Принцип таков:

Если ширина и высота изображения не равны, так что длинная сторона изображения может быть полностью отображена, то сторона высоты исходного изображения будет равна стороне, соответствующей фиксированному окну после масштабирования, а другая сторона стороны будут находиться в равных пропорциях.

Если ширина и высота изображения равны, ширина и высота масштабированного изображения будут определяться в соответствии с шириной и высотой фиксированного поля. Если ширина фиксированного поля больше высоты, то высота. масштабированная картинка будет равна высоте фиксированного ящика, и соответственно можно найти другую сторону, и наоборот.

 /** * @param {Number} sx фиксированная координата x блока, sy фиксированный левый индекс y блока* @param {Number} box_w фиксированная ширина блока, box_h фиксированная высота блока* @param {Number} source_w ширина исходного изображения, source_h высота исходного изображения* @return {Object} {параметры drawImage, координата x, координата y, ширина и высота масштабированного изображения}, соответствующие drawImage(imageResource, dx, dy, dWidth, dHeight) */ function containsImg(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); ctx.fillStyle = '#e1f0ff'; //Фиксируем положение и размер поля — изображение нужно разместить в этом поле ctx.fillRect(30, 30, 150, 200); var img = new Image(); .log(img.width,img.height); вар imgRect = containsImg(30,30,150,200,img.width,img.height); console.log('imgRect',imgRect', ctx.drawImage(img, imgRect.dx, ​​imgRect.dy, imgRect.dWidth, imgRect.dHeight); } img.src = ./timg2.jpg; //Примечание. В режиме предварительной загрузки img значение onload должно быть размещено выше значения, присвоенного src, чтобы событие onload не могло быть запущено при наличии кэша, в результате чего событие onload не выполнялось.

Масштабируйте изображение, сохраняя соотношение сторон, чтобы полностью была видна только короткая сторона изображения. То есть изображение обычно является полным только в горизонтальном или вертикальном направлении, а в другом направлении будет происходить обрезка.

принцип:

Захват части изображения в соответствии с пропорциями фиксированного поля.

 /** * @param {Number} box_w фиксированная ширина блока, box_h фиксированная высота блока* @param {Number} source_w ширина исходного изображения, source_h высота исходного изображения* @return {Object} {перехваченная информация об изображении}, соответствует drawImage(imageResource , sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) параметры*/ функция 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; (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, sWidth, sHeight } } var c=document.getElementById(myCanvas); var ctx=c.getContext(2d); ctx.fillStyle = '#e1f0ff'; //Исправляем положение и размер поля — изображение должно быть помещено в это поле ctx .fillRect(30, 30, 150, 200); вар img = новое изображение (); img.onload = функция () { 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; //Примечание: в режиме предварительной загрузки img значение onload должно быть размещено выше значения, присвоенного src, чтобы событие загрузки не могло быть запущено при его наличии. уже кэш. В результате события в onload не выполняются.

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.