canvas简单demo

颜色取反

点击取反按钮，将照片的色值取反，看起来像是照片底片的样子。

 html和css没什么说的，几乎没有改变样式，直接标签写上去就行，主要说js

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "girl.jpg";  //照片路径
img.onload = function() {
    ctx.drawImage(img,0,0,canvas.width,canvas.height);
    //获取所有像素点
    var getColor = ctx.getImageData(0,0,canvas.width,canvas.height);
    var btn = document.getElementById("btn");
    btn.onclick = function() {
        //循环像素点
	    var l = getColor.data.length;
	    for(var i = 0;i < l;i++) {
		    if((i + 1) % 4 != 0) {
			    getColor.data[i] = 255 - getColor.data[i];
		    }
	    }
	    //把循环后的像素点绘制到canvas
	    ctx.putImageData(getColor,0,0);
	}
}

刮刮卡

按住左键移动鼠标，实现类似刮刮卡的效果。

HTML中将canvas定位到img上面，主要说js

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "#ccc";
ctx.fillRect(0,0,600,400);
ctx.closePath();
//设置onmousedown事件
canvas.onmousedown = function(e) {
	var even = e || event;
	ctx.beginPath();
	canvas.onmousemove = function(e) {
		var even = e || event;
		var actx = even.clientX - canvas.offsetLeft - 1;
		var acty = even.clientY - canvas.offsetTop - 1;
		//清空重叠部分留下老图
		ctx.globalCompositeOperation = "destination-out";
		//根据坐标点画圆
		ctx.arc(actx,acty,30,0,2 * Math.PI);
		ctx.fill();
		//超过80%  全透明
		var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
		//声明一个变量存储数据
		var count = 0;
		var l = imgData.data.length;
		console.log(imgData.data);
		//循环像素点
		for(var i = 3;i < l;i+=4) {
			if(imgData.data[i] == 0) {
				count++;
			}
		}
		//判断透明是否不小于80%
		if(count /(l/4) >= 0.8) {
			ctx.clearRect(0,0,canvas.width,canvas.height);
		}
		ctx.closePath();
	}	
	//鼠标弹起事件
	window.onmouseup = function() {
		canvas.onmousemove = null;
	}
}

画板

可以选择画笔宽度，点击颜色打开调色板进行选色，实现类似画板的效果；

同样html和css不做介绍，注意调色板使用input type=color来实现的，还是重点说js
 

        var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		ctx.save();
		ctx.beginPath();
		$("canvas").mousedown(function(e) {
			var even = e || event;
			ctx.beginPath();
			ctx.strokeStyle = $("input").eq(1).val();
			ctx.lineWidth = $("select option:selected").text() * 2;
			ctx.moveTo(even.clientX, even.clientY);
			$("canvas").mousemove(function(e) {
				var even = e || event;
				ctx.lineTo(even.clientX, even.clientY);
				ctx.stroke();
			});
		});
		$("canvas").mouseup(function() {
			ctx.closePath();
			$("canvas").unbind("mousemove");
		});
		$("input").eq(0).click(function() {
			ctx.clearRect(0,0,600,600);
		});

画板还可以添加橡皮擦效果，这样可以让效果更丰富。