canvas---5合成aplaph值 导出图片--事件操作

全局透明

var oc =document.getElementById("canvas")
			var octTex = oc.getContext("2d")
			
			octTex.fillRect(0,0,100,100)
			octTex.fillStyle="red"
			octTex.globalAlpha=0.5
			octTex.fillRect(50,50,100,100)
			

http://www.w3school.com.cn/tags/canvas_globalcompositeoperation.asp

ctx.globalCompositeOperation="source-over";

导出图片

http://www.w3school.com.cn/tags/html_ref_canvas.asp 

			var oc = document.getElementById("canvas")
			var img = document.getElementById("img1")
			var octTex = oc.getContext("2d")

			octTex.fillRect(0, 0, 100, 100)
			octTex.fillStyle = "red"
			octTex.globalCompositeOperation = "xor"
			octTex.fillRect(50, 50, 100, 100)
			img.src = oc.toDataURL()

事件操作

http://www.w3school.com.cn/tags/canvas_ispointinpath.asp

isPointInPath

以圆为例

var oc = document.getElementById("canvas")
			var img = document.getElementById("img1")

			var octTex = oc.getContext("2d")
			octTex.beginPath()
			octTex.arc(50, 50, 50, 0, Math.PI * 2)
			octTex.fill()
			octTex.closePath()
			oc.onmousedown = function(ev) {
				var ev = ev || window.event
				var x = 50 - ev.clientX
				var y = 50 - ev.clientY
				if(Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)) < 50) {
					console.log("圆")
				}
			}

长方形 

			var oc = document.getElementById("canvas")
			var img = document.getElementById("img1")

			var octTex = oc.getContext("2d")
			octTex.fillRect(0,0,100,100)
			oc.onmousedown = function(ev) {
				var ev = ev || window.event
				if(ev.clientX<100&&ev.clientY<100) {
					console.log("长方形")
				}
			}