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);
		});

畫板還可以添加橡皮擦效果，這樣可以讓效果更豐富。