Делаем картинку замощённую меньшим изображением в canvas html 5

Как всегда доктайп и хэд страници:

<!DOCTYPE html>

<html>

<head>

<title>pattern fill with an image | how2.org.ua</title>

<style>

html,body { height: 100%;}

body { margin: 0; body: 0; overflow: hidden; }

#pattern { position: absolute; top: 0; left: 0; width: 100%; bottom: 0; height: 100%; }

</style>

</head>

Тело страници с canvas элементом:

<body>

<canvas id=»pattern»></canvas>

Скрипт для управления всем этим добром:

<script>

var canvas = document.querySelector(‘canvas’),

    img = document.createElement(‘img’),

    ctx = canvas.getContext ? canvas.getContext(‘2d’) : null;



canvas.width = window.innerWidth;

canvas.height = window.innerHeight;



img.onload = function () {

  ctx.fillStyle = ctx.createPattern(this, ‘repeat’);

  ctx.fillRect(0, 0, canvas.width, canvas.height);

};

img.src = ‘logo.png’;



</script>

Первым делом как всегда создаём переменную canvas и ctx. Кроме того создаём изображение для создания эффекта замощения.
Указываем шириной и высотой canvas элемента — ширину и высоту окна.

Создаём функцию выполняемую при загрузке изображения img.
Внутри неё указываем стиль заполнения. При этом указываем, что «мостить» будем этим (this — ссылка на текущий класс) элементом и будем повторять (repeat). Это свойство повторяем свойство background-repeat из css.
После этого указываем, что рисовать будем в пределах 0,0,ширина,высота.
Покончив с этим указываем путь (src) к изображению.

Закрываем теги:

</body>

</html>

Наслаждаемся результатом.

 

Похожий код:

Фото аватара
Алексей Петров

Программист, разработчик с 5 летним опытом работы. Учусь на разработчика игр на Unity и разработчика VR&AR реальности (виртуальной реальности). Основные языки программирования: C#, C++.

Оцените автора
Бла, бла код
Добавить комментарий