キャンバス描画にdrawImageを使用する場合、描画される絵のサイズや比率が異なるため、html+cssレイアウトと同様に、containやcoverなど、さまざまなニーズに対応する必要があります。
含むアスペクト比を維持しながら、画像の長辺が完全に表示されるように画像を拡大縮小します。つまり、画像を完全に表示することができます。
包含モードに従って固定ボックスの長方形内に画像を配置する場合、画像をある程度拡大縮小する必要があります。
原則は次のとおりです。
画像の長辺を完全に表示できるように画像の幅と高さが等しくない場合、元の画像の高さの辺は拡大縮小後の固定ボックスに対応する辺と等しく、その他の辺は等しくなります。側面は同じ割合で見つかります。
画像の幅と高さが等しい場合、拡大縮小された画像の幅と高さは、固定ボックスの幅と高さに従って決定されます。固定ボックスの幅が高さより大きい場合は、画像の高さが決まります。拡大縮小された画像は固定ボックスの高さに等しく、反対側もそれに応じて見つけることができ、その逆も同様です。
/** * @param {数値} sx ボックスの固定 x 座標、sy 固定 y ボックスの左添字* @param {数値} box_w ボックスの固定幅、box_h ボックスの固定高さ* @param {数値} 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(ソース_w > ソース_h || (ソース_w == ソース_h && ボックス_w < ボックス_h)){ dHeight = ソース_h*d幅/ソース_w; dy = sy + (ボックス_h-d高さ)/2 }else if(ソース_w < ソース_h || (ソース_w) == ソース_h && ボックス_w > ボックス_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() { console .log(img.width,img.height); var 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 プリロード モードでは、既にキャッシュがある場合に onload イベントがトリガーされず、onload のイベントが実行されないことを避けるために、onload を src に割り当てられた値よりも上に配置する必要があります。カバー画像の短辺のみが完全に表示されるように、アスペクト比を維持しながら画像を拡大縮小します。つまり、通常、画像は水平方向または垂直方向のみで完成し、他の方向ではクリッピングが発生します。
原理：
固定ボックスの比率に従って画像の一部をキャプチャします
/** * @param {数値} box_w 固定ボックス幅、box_h 固定ボックス高さ* @param {数値} source_w 元画像幅、source_h 元画像高さ* @return {オブジェクト} {インターセプト画像情報}、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 *s高さ/ボックス_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; } return{ sx、sy、sWidth、sHeight } } var c=document.getElementById(myCanvas); var ctx=c.getContext(2d); ctx.fillStyle = '#e1f0ff'; // このボックスに画像を配置する必要があります。 .fillRect(30 , 30, 150, 200); var img = new Image() = function (); 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 イベントがトリガーされないように、onload を src に割り当てられた値よりも上に配置する必要があります。すでにキャッシュになっているため、onload のイベントは実行されません。以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。