canvas 四 合成与事件

/**
 * getImageData(x,y,w,h);
 * 		属性data:一个数组包含每个像素的rgba四个值每个值豆子啊0-255之间
 * putImageDate(获取图像,x,y)
 * 		设置新的图像数据
 * createImageData
 * 		生成新的像素矩阵，初始值为全透明的黑色
 * 		
 */
var oc = document.getElementById("canvas");
var ogc = oc.getContext('2d');

//
ogc.fillRect(0,0,100,100);
var oImg = ogc.getImageData(0,0,100,100);
// oImg.width	//一行的像素数
// 像素数应该为100*100为什么会弹出40000 但是4组值代表一个像素即rgba
// alert(oImg.data.length);//40000整行像素的数组集合
// alert(oImg.data[0]);	//0

<pre name="code" class="javascript">/**
 * canvas 合成
 * 		全局阿尔法值-globalAlpha
 * 	 	覆盖合成
 * 	 		-源：新的图形
 * 	 		-已绘制过的图形
 * 	 		-globalCompositionOperation
 * 	 			source-over destination-over source-atop
 * 	 			destination-atop source-in destination-in
 * 	 			souce-out destionation-out lighter
 * 	 			copy xor
 * 将画布导出为图像
 * 	toDataURL
 * 		火狐右键可直接导出图片
 * 	事件操作
 * 	isPointInPath(x,y)
 * 		-x,y坐标
 * 		-是否在点击范围内
 * 		-jCanvasScript
 */
var oc = document.getElementById("canvas");
var ogc = oc.getContext('2d');

//合成
ogc.fillRect(0,0,100,100);
ogc.fillStyle = 'red';
// ogc.globalAlpha = 0.5;
ogc.globalCompositeOperation = 'xor'
ogc.fillRect(50,50,100,100);

// 将画布导出为图像
oc.toDataURL();	
//canvas 事件操作
ogc.beginPath();
ogc.arc(250,100,50,0,360*Math.PI/180,false);
ogc.closePath();
ogc.fill();

ogc.beginPath();
ogc.arc(250,250,50,0,360*Math.PI/180,false);
ogc.closePath();
ogc.fill();
oc.onmousedown = function(ev){
	var ev = ev || window.event;
	var x = ev.clientX - oc.offsetLeft;
	var y = ev.clientY - oc.offsetTop;

	if(ogc.isPointInPath(x,y)){	//是否在点击的区域内只针对绘制后的最后一个圆解决方法 封装为一个对象
		alert("122");
	}
}
//canvas 事件操作封装
var c1 = new Shape(100,100,50);
var c2 = new Shape(200,200,50);
oc.onmousedown = function(ev){
	var ev = ev || window.event;
	var point = {
		x : ev.clientX - oc.offsetLeft,
		y : ev.clientY - oc.offsetTop
	}
	c1.reDraw(point);
	c2.reDraw(point);
}
c1.click = function(){
	alert("c1范围内");
}
c2.click = function(){
	alert("c2范围内");
}
	function Shape(x,y,r){
		this.x = x;
		this.y = y;
		this.r = r;
		ogc.beginPath();
		ogc.arc(this.x,this.y,this.r,0,360*Math.PI/180,false);
		ogc.fill();
	}
	Shape.prototype.reDraw = function(point){
		ogc.beginPath();
		ogc.arc(this.x,this.y,this.r,0,360*Math.PI/180,false);
		ogc.fill();

		if(ogc.isPointInPoint(point.x,point.y)){
			this.click();
		}
	}