Повторение изображения на холсте с отзывчивой высотой - PullRequest
Новая
       1

Повторение изображения на холсте с отзывчивой высотой

0 голосов
/ 17 июня 2019

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

Мне удалось повторить фоновое изображение после оси 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 : Я бы хотел, чтобы на моем холсте было изображение, повторяющееся по горизонтали, а его высота отзывчива.

Заранее спасибо.

Ответы [ 3 ]

1 голос
/ 17 июня 2019

Надеюсь, объяснение в комментариях ответит на ваш вопрос. Не стесняйтесь просить разъяснений. 

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>
1 голос
/ 18 июня 2019

Если я правильно понял, вы хотите заполнить высоту и повторить по горизонтали, это правильно? 

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>
0 голосов
/ 17 июня 2019

попробуйте настроить размер изображения в соответствии с размером холста, вот так:

bg.src = "http://lorempixel.com/200/200";

Ура! :)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...