Рубрики

HTML | метод canvas createPattern ()

Метод createPattern () используется для повторения указанного элемента в указанном направлении. Это может быть изображение, видео или любой другой элемент холста.

Синтаксис:

context.createPattern(image, "repeat | repeat-x | repeat-y | no-repeat");

Параметры:

  • image: определяет изображение, холст или видео элемент шаблона, который будет использоваться.
  • repeat: повторяет рисунок как по горизонтали, так и по вертикали. Это по умолчанию.
  • repeat-x: повторяет шаблон только по горизонтали.
  • repeat-y: повторяет шаблон только по вертикали.
  • no-repeat: шаблон не повторяется.

Пример:

<!DOCTYPE html>

<html>

  

<head>

    <title>

        HTML | canvas createPattern() Method

    </title>

</head>

<body>

    <h2 style="color:green;"> GeeksforGeeks </h2>

    <h2> HTML canvas createPattern() Method </h2>

    <p style="color:green;">Image to be used:</p>

  

    <img src=

"https://media.geeksforgeeks.org/wp-content/uploads/20191126130440/Untitled183.png"

         id="geeks" width="32" height="32">

  

    <p>Canvas:</p>

    <canvas id="myCanvas" width="500" height="200" 

            style="border:2px solid ">

    </canvas>

    <br><br>

  

    <! - Изменить значения здесь ->

    <button onclick="create('repeat')">Repeat</button>

  

    <! - скрипт для повторения шаблона ->

    <script>

        function create(value) {

            var gfg = document.getElementById("myCanvas");

            var context = gfg.getContext("2d");

            context.clearRect(0, 0, gfg.width, gfg.height);

            var img = document.getElementById("geeks")

            var pattern = context.createPattern(img, value);

            context.rect(0, 0, 150, 100);

            context.fillStyle = pattern;

            context.fill();

        }

    </script>

</body>

  

</html>

Выход:

  • Перед нажатием кнопки:
  • После нажатия на кнопку повтора:

Поддерживаемые браузеры: браузеры, поддерживаемые методом HTML canvas createPattern (), перечислены ниже:

  • Хром
  • Mozilla Firefox
  • Internet Explorer 9.0
  • опера
  • Сафари

Рекомендуемые посты:

HTML | метод canvas createPattern ()

0.00 (0%) 0 votes