21.10.2015, 22:08
|
 |
Аспирант
|
|
Регистрация: 30.04.2013
Сообщений: 92
|
|
|
отражение картинки
Добрый вечер дорогие форумчане помогите с не большой наверное задачкой)
Имеется скрипт для отрисовки картинки в 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);
) ?
заранее всем спасибо |
|
21.10.2015, 22:18
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
|
|
21.10.2015, 22:43
|
|
Аспирант
|
|
Регистрация: 30.04.2013
Сообщений: 92
|
|
|
рони,
примерного решения с context.drawImage я там не нашла)
|
|
21.10.2015, 23:01
|
|
Аспирант
|
|
Регистрация: 30.04.2013
Сообщений: 92
|
|
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);
Последний раз редактировалось Sakyra, 21.10.2015 в 23:05.
|
|
21.10.2015, 23:50
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
|
|
22.10.2015, 00:40
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
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>
|
|
22.10.2015, 01:10
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
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>
|
|
|
|
