Как сделать текстуру на Canvas?

Пользователь

от dayna , в категории: Другие , 10 месяцев назад

Как сделать текстуру на Canvas?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от clifford , 10 месяцев назад

@dayna 

  1. Создайте canvas элемент на странице:
1
<canvas id="myCanvas"></canvas>


  1. Получите контекст рисования:
1
2
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");


  1. Нарисуйте изображение или форму на canvas элементе:
1
ctx.fillRect(0, 0, canvas.width, canvas.height);


  1. Создайте паттерн:
1
var pattern = ctx.createPattern(canvas, "repeat");


  1. Нарисуйте текстуру с помощью функции fillStyle и паттерном, который вы создали:
1
2
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 500, 500);


Пример создания текстуры на canvas: https://codepen.io/pen/?editors=1000