Заполните изображение повторяемой текстурой - PullRequest
Новая
       0

Заполните изображение повторяемой текстурой

2 голосов
/ 10 августа 2011

Можно ли заполнить png прозрачностью с помощью шаблона (повторяемая текстура)?

Вот краткий пример загрузки изображения на холст, но вы не знаете, как заполнить его шаблоном, если это невозможно, есть ли способ извлечь путь из png? 

<script>
    var c = document.getElementById("a");
    var ctx = c.getContext("2d");

   var test= new Image();
    test.src = "images/test.png";
    test.onload = function() {
        ctx.drawImage(test, 0, 0);
    };
</script>

<body>
    <canvas id="a"></canvas>
</body>

Я также создал jsfiddle с реально загруженным png

Этого эффекта я добиваюсь
enter image description here

Обновление

рабочий пример, основанный на ответе Саймона Сарриса http://jsfiddle.net/sergeh/G8egW/6/

1 Ответ

4 голосов
/ 10 августа 2011

Сначала нарисуйте изображение на холсте.

Тогда сделай globalCompositeOperation = 'source-in';

Затем нарисуйте шаблон. Он будет существовать только там, где было изображение.

http://jsfiddle.net/G8egW/2/

Если у вас уже был материал на холсте до этого времени, вам нужно будет выполнить вышеуказанные операции с холстом в памяти, а затем нарисовать этот холст на вашем обычном холсте. Как это:

http://jsfiddle.net/G8egW/5/

(обратите внимание на разницу в сетке)

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

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

...