Повторяющееся изображение на холсте с адаптивной высотой
Я пытаюсь создать холст, на котором у меня есть изображение в качестве фона, которое повторяется по горизонтали и автоматически адаптируется по высоте.
Мне удалось повторить фоновое изображение по оси X, но я не могу настроить высоту.
Это мой код до сих пор:
const cvs = document.getElementById("canvas");
const ctx = cvs.getContext("2d");
const bg = new Image();
bg.src = "http://lorempixel.com/100/100";
const draw = () => {
const ptrn = ctx.createPattern(bg, "repeat-x");
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, canvas.width, canvas.height);
requestAnimationFrame(draw);
};
draw();<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<canvas id = "canvas" width = "1000" height = "200"></canvas>
<script src = "index.js"></script>
</body>
</html>TLDR: I would like to be able to have an image within my canvas that repeats horizontally and its height is responsive.
Заранее спасибо.
Допустим, у меня есть отзывчивый холст, который адаптируется к браузеру пользователя (высота! 00% и ширина 100%). Внутри холста у меня есть изображение, которое повторяется по горизонтали. Чего я пытаюсь добиться, так это иметь это изображение с отзывчивой высотой (например, холст), а также повторять по горизонтали... Надеюсь, это имеет больше смысла.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
попробуйте настроить размер изображения так, чтобы он соответствовал размеру холста:
bg.src = "http://lorempixel.com/200/200";
Ваше здоровье! :)
Надеюсь, объяснение в комментариях ответит на ваш вопрос. Не стесняйтесь обращаться за разъяснениями.
const cvs = document.getElementById("canvas");
const ctx = cvs.getContext("2d");
// First stretch the canvas so we can get
// the full size of teh browser window
cvs.style.height = '100vh';
cvs.style.width = '100vw';
// Now adjust actual canvas size to match
const {width, height} = cvs.getBoundingClientRect();
cvs.height = height;
cvs.width = width;
const bg = new Image();
// Should always wait for onload
// before drawing to prevent race condition.
bg.onload = ()=>{
var x=0;
while(x < cvs.width){
ctx.drawImage(bg, x, 0, 100, cvs.height);
x += bg.width;
}
// draw the image a bunch of times
// var x=0, y=0;
// while(x < cvs.width && y < cvs.height){
// ctx.drawImage(bg, x, y);
// x += bg.width;
// if (x > cvs.width){
// x = 0;
// y += bg.height;
// }
// }
};
bg.src = "http://lorempixel.com/100/100";<canvas id = "canvas"></canvas>
<script src = "index.js"></script>Это был ужин близко к тому, что мне нужно. Удаление оператора if внутри while и замена текущего drawImage на ctx.drawImage(bg, x, y, 100, cvs.height); заставит его работать! Попробуйте и скажите, что вы думаете :)
как это? если это правильный ответ, пожалуйста, отметьте его как таковой.
Действительно :) Я ждал вашего редактирования, чтобы отметить его как правильное: D Спасибо за помощь @ Однажды я боролся с медведем
Если я правильно понял, вы хотите заполнить высоту и повторить по горизонтали, это правильно?
const cvs = document.getElementById("canvas");
const ctx = cvs.getContext("2d");
var bg = new Image();
bg.src = "http://lorempixel.com/100/100";
var tempCanvas = document.createElement("canvas"),
tCtx = tempCanvas.getContext("2d");
var imgWidth = 200;
var imgHeight = 200;
const draw = () => {
tempCanvas.width = imgWidth;
tempCanvas.height = imgHeight;
tCtx.drawImage(bg, 0, 0, 100, 100, 0, 0, imgWidth, imgHeight);
const ptrn = ctx.createPattern(tempCanvas , "repeat-x");
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, canvas.width, canvas.height);
requestAnimationFrame(draw);
};
bg.onload = () => {
draw();
}<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<canvas id = "canvas" width = "1000" height = "200"></canvas>
<script src = "index.js"></script>
</body>
</html>
это смущает. вы говорите о повторении изображения, а заголовок - о повторении изображения, но вопрос, похоже, заключается в том, чтобы сделать высоту самого холста «отзывчивой». что это? и что вы подразумеваете под «отзывчивым», поскольку это слово обычно относится к ширине устройства, а не к его высоте.