Я пытаюсь отобразить изображение, используя cover
симуляцию на холсте. Я нашел несколько прохладно answer о том, как это сделать.Как масштабировать изображение в холсте?
Пока мое изображение меняется в зависимости от разрешения экрана, но только после обновления страницы.
Как я могу получить следующий scaling effect без обновления страницы? Попробуйте изменить размер окна.
HTML
<canvas id="canvas"></canvas>
JS
var ctx = canvas.getContext('2d'),
img = new Image;
canvas.setAttribute('width', window.innerWidth);
canvas.setAttribute('height', window.innerHeight);
img.onload = draw;
img.src = 'https://upload.wikimedia.org/wikipedia/commons/0/0f/2010-02-19_3000x2000_chicago_skyline.jpg';
function draw() {
drawImageProp(ctx, this, 0, 0, canvas.width, canvas.height);
}
/**
* By Ken Fyrstenberg
*
* drawImageProp(context, image [, x, y, width, height [,offsetX, offsetY]])
*
* If image and context are only arguments rectangle will equal canvas
*/
function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) {
if (arguments.length === 2) {
x = y = 0;
w = ctx.canvas.width;
h = ctx.canvas.height;
}
/// default offset is center
offsetX = offsetX ? offsetX : 0.5;
offsetY = offsetY ? offsetY : 0.5;
/// keep bounds [0.0, 1.0]
if (offsetX < 0) offsetX = 0;
if (offsetY < 0) offsetY = 0;
if (offsetX > 1) offsetX = 1;
if (offsetY > 1) offsetY = 1;
var iw = img.width,
ih = img.height,
r = Math.min(w/iw, h/ih),
nw = iw * r, /// new prop. width
nh = ih * r, /// new prop. height
cx, cy, cw, ch, ar = 1;
/// decide which gap to fill
if (nw < w) ar = w/nw;
if (nh < h) ar = h/nh;
nw *= ar;
nh *= ar;
/// calc source rectangle
cw = iw/(nw/w);
ch = ih/(nh/h);
cx = (iw - cw) * offsetX;
cy = (ih - ch) * offsetY;
/// make sure source rectangle is valid
if (cx < 0) cx = 0;
if (cy < 0) cy = 0;
if (cw > iw) cw = iw;
if (ch > ih) ch = ih;
/// fill image in dest. rectangle
ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h);
}
Следует отметить, что масштабирование на холсте не работает. То, что нарисовано на холсте, нельзя манипулировать, как . Изображение должно быть перерисовано на измененном холсте. – rottenoats
@Grimbode: Я думаю, что сейчас у меня это покрыто. – Cerbrus
Лучше всего чистить холст, а затем перерисовывать или перерисовывать достаточно хорошо, если предыдущий рисунок больше не виден? Что это делает с производительностью? –