h5学习笔记之canvas（3）

一、像素
createImageData(sx,sy)
创建新的、空白的 ImageData 对象
getImageData(x1,y1,sx,sy)
返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据 putImageData(img,x2,y2)
把图像数据（从指定的 ImageData 对象）放回画布上
具体用法：

如1：

        var can = document.getElementById("can");
		var cxt = can.getContext("2d");
		cxt.fillStyle = "red";
		cxt.beginPath();
		cxt.fillRect(100,100,100,100);
		cxt.closePath();

		var img = cxt.getImageData(50,50,200,200);   
		//alert(img);对象
		//alert(img.width);
		//alert(img.height);
		//alert(img.data.length);
		cxt.putImageData(img,200,200)

如下图 其实上面这些代码的作用就是做一个倒影图
var img = cxt.getImageData(50,50,200,200); 这条代码的作用就是创造一个对象，然后把这个对象的数据，起点为50.50 大小为200x200的像素页面复制掉
然后
cxt.putImageData(img,200,200) 这段代码的作用 把复制的对象，也就是现在这像素页面右下的页面，且设置它的位置是200，200
如2、

		var can = document.getElementById("can");
		var cxt = can.getContext("2d");
		var img = cxt.createImageData(200,200);        //创建新的、空白的 ImageData 对象 200x200大小
        //下面这段代码的意思就是，一个像素里有四个值分别就是rgba,每个值的大小都是0-255，img.width*img.height 就是所有的像素点内的值 
		for (var i=0;i<img.width*img.height ;i++ )
		{
			img.data[4*i] = 0;            //第一个值 是red
			img.data[4*i+1] = 255;          //第二个值 是green
			img.data[4*i+2] = 0;           //第三个值是blue
			img.data[4*i+3] = 255;          //第四个值是透明度
		}

		cxt.putImageData(img,200,200)

图2
图1和图2的比较，第一个图通过下面的代码做出的一给区域，并返回像素数据，在通过对数据的复制来产生倒影感觉
第二图是直接创造一个像素区域，在设置这个区域的位置

        cxt.fillStyle = "red";
		cxt.beginPath();
		cxt.fillRect(100,100,100,100);
		cxt.closePath();

		var img = cxt.getImageData(50,50,200,200); 

二、合成
合成
如原来的画面是这样的的，蓝色是源图像，红色是目标图像

1、globalAlpha 设置或返回绘图的当前 alpha 或透明值

2、globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上
source-over默认。在目标图像上显示源图像。
source-atop在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。

source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。

source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。

destination-over在源图像上方显示目标图像。

destination-atop在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。

destination-in在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。

destination-out在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。

lighter显示源图像 + 目标图像叠加。

copy显示源图像。忽略目标图像。

xor使用异或操作对源图像与目标图像进行组合。中间是空的e

三、将画布导出为图片
toDataURL 火狐、谷歌浏览器右键菜单可直接导出为图片
用法：

        var img = document.getElementById("img");
		var can = document.getElementById("can");
		var cxt = can.getContext("2d");
		cxt.fillStyle = "red";
		cxt.beginPath();
		cxt.fillRect(100,100,100,100);
		cxt.closePath();
		cxt.fillStyle = "blue";
		cxt.globalCompositeOperation  = "xor";//设置交叉样式
		cxt.beginPath();
		cxt.fillRect(150,150,100,100);
		cxt.closePath();
		//alert(can.toDataURL());
		img.src = can.toDataURL();          //上面的画布内的图片可以右键保存

四、画板

	    var can = document.getElementById('can');
		var btn = document.getElementById('btn');
		var cxt = can.getContext('2d');
		  can.onmousedown = function(ev){
			var ev = ev || window.event;
			var x = ev.clientX - can.offsetLeft;
			var y = ev.clientY - can.offsetTop;
			cxt.beginPath();
			cxt.moveTo(x,y);
			document.onmousemove = function(ev){
				var ev = ev || window.event;
				var x = ev.clientX - can.offsetLeft;
				var y = ev.clientY - can.offsetTop;
				cxt.lineTo(x,y);
				cxt.stroke();	
			}
			document.onmouseup = function(){
				document.onmousedown = null;
				document.onmousemove = null;
			}
	
		}
			btn.onclick = function(){
			cxt.clearRect(0,0,500,500);
		}

五、事件
面向对象写isPointInPath(x,y) 事件

    var can = document.getElementById('can');
	var cxt = can.getContext('2d');
	can.onmousedown = function(){
		var ev = ev || window.event;
		var point = {
			 x : ev.clientX - can.offsetLeft,
			 y : ev.clientY - can.offsetTop
		}
		obj1.draw(point);
		obj2.draw(point);
	}
		function obj(x,y){
			this.x = x;
			this.y = y;
			cxt.beginPath();
			cxt.arc(this.x,this.y,50,0,360,false);
			cxt.closePath();
			cxt.fill();
		}
		var obj1 = new obj(100,100);
		var obj2 = new obj(200,200);
		obj.prototype.draw = function(point){
			cxt.beginPath();
			cxt.arc(this.x,this.y,50,0,360,false);
			cxt.closePath();
			cxt.fill();
			if ( cxt.isPointInPath(point.x,point.y) ) 
			{
				this.aa();
			}
		}
		obj1.aa = function(){
			alert(1);
		}
		obj2.aa = function(){
			alert(2);
		}

六、通过插件来玩canvas

         var btn = document.getElementById("btn");
		//var cxt = can.getContext("2d");                               //这里不需要这个代码了
		jc.start("can",true);//id名,true代表重绘
		jc.circle(100,100,100,"#f00",1).id("can1").click(function(){                //绘制矩形：x,y,w,h,颜色,填充1/触笔0  加一个id是因为后面有一个点击事件，需要一个触发者
			jc("#can1").color("#0f0");
		});
		jc.start("can");       //这里还需要一句