отражение картинки
Добрый вечер дорогие форумчане помогите с не большой наверное задачкой)
Имеется скрипт для отрисовки картинки в canvas
function renderSkin2d(skinImage)
{
var canvas = document.createElement('canvas');
canvas.width = 58 * scale;
canvas.height = 32 * scale;
canvas.setAttribute('class', skinImage.getAttribute('class'));
var context = canvas.getContext("2d");
context.imageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.mozImageSmoothingEnabled = false;
var s = scale;
var h = 16 ;
context.drawImage(skinImage, 4*h, 20*h, 4*h, 12*h, 4*s, 20*s, 4*s, 12*s);
context.drawImage(skinImage, 4*h, 20*h, 4*h, 12*h, 8*s, 20*s, 4*s, 12*s);
}
Первый context отрисовывает картинку правильно а второй context отрисовывает туже самую картинку только немного правее (как второй context отзеркалить по горизонтали context.drawImage(skinImage, 4*h, 20*h, 4*h, 12*h, 8*s, 20*s, 4*s, 12*s);) ? заранее всем спасибо |
|
рони,
примерного решения с context.drawImage я там не нашла) |
context.scale(-1, 1); применить не получается
context.drawImage(skinImage, 4*h, 20*h, 4*h, 12*h, 4*s, 20*s, 4*s, 12*s); context.scale(-1, 1); context.drawImage(skinImage, 4*h, 20*h, 4*h, 12*h, 8*s, 20*s, 4*s, 12*s); |
|
canvas зеркальное отражение
Sakyra,
<!doctype html>
<html>
<meta charset='utf-8'>
<head><title></title></head>
<body>
<canvas id='image' width="500" height="375" ></canvas>
<script>
var k = .6,
img = document.getElementById('image'),
context = img.getContext('2d'),
pic = new Image();
pic.onload = function () {
context.canvas.width = pic.width;
context.canvas.height = pic.height*(1 + k);
context.drawImage(pic, 0, 0, pic.width, pic.height)
context.translate(0, pic.height)
context.scale(1, -1);
context.drawImage(pic, 0, -pic.height*k, pic.width, pic.height*k)
};
pic.src = 'http://berimus.ru/uploads/thumbs/c/9/4/c94b13fe0561c596ce800e7d24e8da78.jpg';
</script>
</body>
</html>
|
Sakyra,
<!doctype html>
<html>
<meta charset='utf-8'>
<head><title></title></head>
<body>
<canvas id='image' width="500" height="375" ></canvas>
<script>
var k = .3, op = .3 ,
img = document.getElementById('image'),
context = img.getContext('2d'),
pic = new Image();
pic.onload = function () {
context.canvas.width = pic.width;
context.canvas.height = pic.height*(1 + k);
context.drawImage(pic, 0, 0, pic.width, pic.height)
context.translate(0, pic.height)
context.scale(1, -1);
context.drawImage(pic, 0, -pic.height, pic.width, pic.height);
gradient = context.createLinearGradient(0, 0, pic.width,0);
gradient.addColorStop(0, "rgba(255, 255, 255, " + op + ")");
gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
context.fillStyle = gradient;
context.rect(0, -pic.height, pic.width, pic.height);
context.fill();
};
pic.src = 'http://multiki-kartinki.narod.ru/images/Pooh28_small.jpg';
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 03:06. |