Блог

Главная - Вопросы по программированию - Как изменить шаблон повторения изображения в холсте HTML5

Как изменить шаблон повторения изображения в холсте HTML5

#javascript #html5-canvas #html2canvas

#javascript #html5-canvas #html2canvas

Вопрос:

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

введите описание изображения здесь

ИЛИ как показано ниже…

введите описание изображения здесь

Но с приведенным ниже кодом у меня есть только этот шаблон, который находится здесь….введите описание изображения здесь

 <div style="width: 675px;height:675px;overflow: hidden;"><canvas id="cc" width="300px" height="300px"></canvas></div>

<script>
    drawPattern(img, current_size);
    function drawPattern(img, size) {
         var canvas = document.getElementById('cc');
         
         var tempCanvas = document.createElement("canvas"),
             tCtx = tempCanvas.getContext("2d");
    
         tempCanvas.width = size;
         tempCanvas.height = size;
         tCtx.drawImage(img, 0, 0, img.width, img.height, 0, 0, size, size);
    
         // use getContext to use the canvas for drawing
         var ctx = canvas.getContext('2d');
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         ctx.fillStyle = ctx.createPattern(tempCanvas, 'repeat');
         
         ctx.beginPath();
         ctx.rect(0,0,canvas.width,canvas.height);
         ctx.fill();
    
    }

</script>

Пожалуйста, помогите в этом, как я могу получить эти разные шаблоны. Заранее спасибо.

Комментарии:

1.Вы можете изменить способ рисования изображения и, следовательно, шаблон, используя setTransform developer.mozilla.org/en-US/docs/Web/API /… и связанные с ним функции. Например, чтобы отразить шаблон по горизонтали, нарисуйте изображение дважды, один раз нормально и один раз зеркально вдоль x. Также увеличьте размер холста, чтобы он соответствовал двум изображениям, например var w = size;cc.width = w*2; cc.height = w; tCtx.drawImage(img, 0, 0, w, w); tCtx.setTransform(-1,0,0,1,w*2,0); tCtx.drawImage(img, w* 2, 0, w, w); var pat = tCtx.createPattern(cc,"repeat") для использования ctx.fillStyle = pat

2. Отлично, это действительно помогло. Спасибо! @Blindman67

Ответ №1:

Я считаю, что существует бесконечное количество шаблонов, которые вы можете выполнить. Поэтому сложно рассказать вам весь код, который вы ищете. Вы должны изучить множество технических приемов и «украсть» идеи для себя.

Из того, что я видел, вы используете JavaScript для выполнения этих шаблонов, но есть и другие способы добиться этого. Вы можете просто использовать HTML и CSS , например. Нравится:

 <!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-image: url("image.png");
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
    <h1>The background-repeat Property</h1>
    <p>Here, the background image is repeated only vertically.</p>
</body>
</html>

Кроме того, background-repeat свойство может иметь следующие значения:

 background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

Наконец, есть еще CSS свойства, которые вы можете использовать для выполнения различных фоновых шаблонов, таких как:

 background-position: center; /* Center the image */
background-size: cover; /* Resize the background image to cover the entire container */

HTML и CSS документация:
https://www.w3schools.com/cssref/pr_background-repeat.asp