Не работает context.scale(-1, 1);
127
23 июля 2019, 19:20
Не работает context.scale(-1, 1) для отражения картинки на канвасе
ctx.save();
ctx.scale(-1, 1);
ctx.drawImage(head, 100, 100, 50, 50);
ctx.restore();
Answer 1
На самом деле все работает. Просто при вызове restore scale сбрасывается и отрисованное изображение уходит из видимой области.
Чтобы этого избежать можно просто просто исрользовать отрицательные координаты для вывода по оси x.
В этом случае при сбросе scale они становятся положительными и вывод становится нормальным:
Пример:
var ctx = document.getElementById('c').getContext('2d');
function l(img) {
ctx.save();
ctx.scale(-1, 1);
ctx.drawImage(img, -200, 0, 100, 100);
ctx.restore();
ctx.save();
ctx.drawImage(img, 0, 0, 100, 100);
ctx.restore();
}<canvas id="c" width="200" height="200"></canvas><br/>
<img style="display:none" src="http://images.math.cnrs.fr/IMG/png/section8-image.png" width="256" height="256" id="t" onload="l(this)">
-
18:54
-
17:35
-
14:27
-
21:22
-
14:06
-
21:33
Виртуальный выделенный сервер (VDS) становится отличным выбором
-
22:26
-
22:40
-
08:34
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47701 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30547 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23728 visits
- Как через css изменить цвет png изображения? 10373 visits
- Blob video url download 9982 visits
- Php curl запрос через прокси с авторизацией 9241 visits
- Работа с captcha vk api 8118 visits
© "hostciti.net" 29.1.2025 | 11:19