Canvas зеркально отражение!

[Severtain]

Всем привет!

Наткнулся на одну проблемку. Есть изображения которые используються несколько раз, однако их нужно зеркально отразить по горизонтали!
Как это сделать на Canvas'e???

[DjDiablo]

Вот ссылка на вертикальное отражение
http://www.digitalia.be/file_download/14/reflection-jquery.zip
подключается

<img src="test.jpg" alt="" class="reflect" />

затем

$("#gallery img").reflect();

тоже самое но с параметрами

$('#gallery img').reflect({height:0.4, opacity:0.75}); // высота 40%, непрозрачность 0.75

думаю переписать труда не составит.


На горизонтальное отражение переделать дело 5-15 минут.

[Severtain]

А средствами канвас как я понимаю, это не возможно?

[Gozar]

А средствами канвас как я понимаю, это не возможно?

возможно, поищи на mdc про канвас

[Sweet]

А средствами канвас как я понимаю, это не возможно?

Этот reflect работает с помощью канвас

[nikita.mmf]

https://developer.mozilla.org/en/Can...ransformations

[DjDiablo]

Обучалка.
http://w3pro.ru/article/html-5-canva...chinayushchikh

[dmitriymar]

горизонтальное отражение

var razmer=parseInt(elem_kanva.width/2)
	var cnvobj=document.getElementById(elem_kanva.name_can);
    var  ctx=cnvobj.getContext("2d");
	for (i=0;i<=razmer;i++)
	{
		 imgd = ctx.getImageData(i,0, 1, elem_kanva.height);
		 imgd1 = ctx.getImageData((elem_kanva.width-i),0, 1, elem_kanva.height);
		 ctx.putImageData(imgd, (elem_kanva.width-i), 0);
		 ctx.putImageData(imgd1, i, 0);
	}

вертикальное отражение

var razmer=parseInt(elem_kanva.height/2);
	var cnvobj=document.getElementById(elem_kanva.name_can);
    var  ctx=cnvobj.getContext("2d");
	for (i=0;i<=razmer;i++)
	{
		 imgd = ctx.getImageData(0,i, elem_kanva.width, 1);
		 imgd1 = ctx.getImageData(0,(elem_kanva.height-i), elem_kanva.width, 1);
		 ctx.putImageData(imgd, 0, (elem_kanva.height-i));
		 ctx.putImageData(imgd1, 0, i);
	}

[Severtain]

всем спасибо! буду пробывать!!!

[DjDiablo]

Выпил кофе и из любопытства переделал плагин. Правда под IE непеределывал. Но в остальных нормуль

/*!
	reflection.js for jQuery v1.1
	(c) 2006-2011 Christophe Beyls <http://www.digitalia.be>
	MIT-style license.
*/

(function($) {

$.fn.extend({
	reflect: function(options) {
		options = $.extend({
			height: 1/3,
			opacity: 0.5
		}, options);

		return this.unreflect().each(function() {
			var img = this;
			if (/^img$/i.test(img.tagName)) {
				function doReflect() {
					var imageWidth = img.width, imageHeight = img.height, reflection, reflectionHeight, wrapper, context, gradient;
					reflectionHeight = Math.floor((options.height > 1) ? Math.min(imageHeight, options.height) : imageHeight * options.height);

					reflection = $("<canvas />")[0];
					if (reflection.getContext) {
						context = reflection.getContext("2d");
						try {
                                                        //11
							$(reflection).attr({width: imageWidth, height: imageHeight});
							context.save();
                                                  
                                // отсчитываем по x не от нуля, а наоборот от значения равной ширине изображения
							context.translate(imageWidth, 0);
							context.scale(-1, 1);

                                                        // рисуем картинку отражение
							context.drawImage(img, 0, 0, imageWidth, imageHeight);
							context.restore();
							context.globalCompositeOperation = "destination-out";

                                                        //рисуем градиент поверх картинки                                                        
							gradient = context.createLinearGradient(0, 0, imageWidth,0);
							gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - options.opacity) + ")");
							gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
							context.fillStyle = gradient;
							context.rect(0, 0, imageWidth, imageHeight);
							context.fill();
						} catch(e) {
							return;
						}
					} else {
						if (!$.browser.msie) return;
						reflection = $("<img />").attr("src", img.src).css({
							width: imageWidth,
							height: imageHeight,
							marginBottom: reflectionHeight - imageHeight,
							filter: "FlipV progid:DXImageTransform.Microsoft.Alpha(Opacity=" + (options.opacity * 100) + ", FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=" + (reflectionHeight / imageHeight * 100) + ")"
						})[0];
					}
                                        //я изменил display чтобы изображения в врапере встали вряд
					$(reflection).css({display: "inline", border: 0});

					wrapper = $(/^a$/i.test(img.parentNode.tagName) ? "<span />" : "<div />").insertAfter(img).append([img, reflection])[0];
					wrapper.className = img.className;
					$.data(img, "reflected", wrapper.style.cssText = img.style.cssText);

					//изменение ширины враппера(вместо Y, теперь меняем X)
					$(wrapper).css({width: imageWidth*2, height: imageHeight, overflow: "hidden"});

                                        //я изменил display чтобы изображения в врапере встали вряд
					img.style.cssText = "display: inline; border: 0px";

					img.className = "reflected";
				}

				if (img.complete) doReflect();
				else $(img).load(doReflect);
			}
		});
	},

	unreflect: function() {
		return this.unbind("load").each(function() {
			var img = this, reflected = $.data(this, "reflected"), wrapper;

			if (reflected !== undefined) {
				wrapper = img.parentNode;
				img.className = wrapper.className;
				img.style.cssText = reflected;
				$.removeData(img, "reflected");
				wrapper.parentNode.replaceChild(img, wrapper);
			}
		});
	}
});

})(jQuery);