下面举一些小例子:
先假设的创建一个上下文环境
1 var mycanvas = document.getElementById("mycanvas"); 2 var context = mycanvas.getContext("2d");
1.canvas做灰色图像:
个人认为主要的知识点在于:
(1)获取当前画布中图像的各个像素点的值;
(2)灰色图像的求解方式(r+g+b)/3,再将这个值赋给原来的像素的R、G、B;
(3)在用新的颜色值画一张图片
1 //此处就忽略图片预加载的步骤直接写关键点 2 //获取画布中的像素点 3 var imgData = context.getImageData(0,0,myCanvas.width,myCanvas.height); 4 var pixels = imgData.data; 5 6 //获取每个像素点的rgb 7 for(var i=0; i<pixels.length; i+=4){ 8 var r = pixels[i]; 9 var g = pixels[i+1]; 10 var b = pixels[i+2]; 11 var gray = (r+b+g)/3; 12 pixels[i] = gray; 13 pixels[i+1] = gray; 14 pixels[i+2] = gray; 15 } 16 //重新绘制一张灰色的图片 17 context.putImageData(imgData,100,100);
2.canvas刮刮乐
个人认为主要的知识点:
(1)在网页中用画布去遮盖原来的img图片;
(2)使用图像组合模式中的"destination-out",当有两个图像重合额时候保留原图未重合部分,其他置于透明;
(3)canvas中添加事件;
(4)当画布中的透明区域大于整个画布的百分之多少的时候,清空整个画布
//绘制蒙版 context.fillStyle = "#CCCCCC"; context.fillRect(0,0,myCanvas.width,myCanvas.height); //设为组合模式中的一种 context.globalCompositeOperation = "destination-out"; //定义需要的变量 var startX = 0; var startY = 0; var isDown = false; myCanvas.onmousedown = function(e){ isDown = true; startX = e.offsetX; startY = e.offsetY; } myCanvas.onmousemove = function(e){ if(!isDown){ return; } var endX = e.offsetX; var endY = e.offsetY; context.beginPath(); context.moveTo(startX,startY); context.lineTo(endX,endY); context.lineWidth = 40; context.lineCap = "round"; context.stroke(); startX = endX; startY = endY; //上一次的终点是新的起点 var b = baifenbi(); if(b>0.4){ myCanvas.style.display = "none"; } } myCanvas.onmouseup = function(){ isDown = false; } function baifenbi(){ var count = 0; var imgData = context.getImageData(0,0,myCanvas.width,myCanvas.height); var pixels = imgData.data; for(var i=0; i<pixels.length; i+=4){ var a = pixels[i+3]; if(a<128){ count++; } } var b = count/(pixels.length/4); return b; }