Зеркальный День или отрази картинку на canvas

Следующий зеркальный день - 18 февраля с.г. И вот почему:

Исходник этого маленького скрипта, с точностью до размещения картинки (в листинге предполагается, что картинка с именем 2.png находится в текущей папке), таков:

<script type="text/javascript">
var img = new Image();
    img.src = "./2.png";
img.onload = function() {
 var c = document.getElementById("outputMirror");
 var ctx = c.getContext("2d");
 ctx.drawImage (img, img.width, 0);
 ctx.save();
 ctx.translate(img.width, 0);
 ctx.scale(-1, 1);
 ctx.globalAlpha = 0.25;
 ctx.drawImage (img, 0, 0);
 ctx.restore();
 ctx.setTransform (1,0,0,1,0,0);
};
</script>
<noscript>
 <div align="center">
  Извините, нужен Javascript для работы примера
 </div>
</noscript>

<div align="center">
 <canvas id="outputMirror" width="500" height="150">
  Извините, Ваш браузер не поддерживает тег canvas
 </canvas>
</div>

Сама исходная картинка - вот она:

картинка 2.png

Ну а первым был пример, демонстрирующий вертикальное отражение картинки с помощью тега <canvas> и Javascript:

Вот картинка для него и исходник, с учётом того, что в реальном документе, если мы разместим оба скрипта, мы должны будем поменять путь к картинке и переименовать, например, img в img2, а outputMirror - в outputMirror2. Изначально тут исходник чуть более замудрён, но пусть так и остаётся.

картинка 1.png

<script type="text/javascript">
var img = new Image();
    img.src = "./1.png";
img.onload = function() {
 var thumbWidth = 240;
 var reflectionHeight = 256;
 var c = document.getElementById("outputMirror");
 var ctx = c.getContext("2d");
 var x = 0;
 var y = 0;
 ctx.drawImage(img, x, y, thumbWidth, thumbWidth); //исходный рисунок
 ctx.save();
 ctx.translate(0, y + thumbWidth + reflectionHeight + 1);
 ctx.scale(1, -1);
 ctx.globalAlpha = 0.25; //прозрачность
 ctx.drawImage(img, 0, img.height - reflectionHeight, img.width, reflectionHeight, 
  x, y, thumbWidth, reflectionHeight); //отражение
 ctx.restore();
 ctx.setTransform (1,0,0,1,0,0);
};
</script>
<noscript>
 <div align="center">
  Извините, нужен Javascript для работы примера
 </div>
</noscript>

<div align="center">
 <canvas id="outputMirror" width="240" height="500">
  Извините, Ваш браузер не поддерживает тег canvas
 </canvas>
</div>

Ну а "зеркальные дни" в этом веке ещё будут, аж до 28.02.2028.

07.02.2018, 08:45 [3164 просмотра]