Canvas刮刮乐和灰色图像

下面举一些小例子：

先假设的创建一个上下文环境

var mycanvas = document.getElementById("mycanvas");
var context = mycanvas.getContext("2d");

1. canvas做灰色图像：

个人认为主要的知识点在于：

• 获取当前画布中图像的各个像素点的值;
• 灰色图像的求解方式(r+g+b)/3,再将这个值赋给原来的像素的R、G、B;
• 在用新的颜色值画一张图片

//此处就忽略图片预加载的步骤直接写关键点
//获取画布中的像素点
var imgData = context.getImageData(0,0,myCanvas.width,myCanvas.height);
var pixels = imgData.data;

//获取每个像素点的rgb
for(var i=0; i<pixels.length; i+=4){
    var r = pixels[i];
    var g = pixels[i+1];
    var b = pixels[i+2];
    var gray = (r+b+g)/3;
    pixels[i] = gray;
    pixels[i+1] = gray;
    pixels[i+2] = gray;
}
//重新绘制一张灰色的图片
context.putImageData(imgData,100,100);

2.canvas刮刮乐

个人认为主要的知识点：

• 在网页中用画布去遮盖原来的img图片;
• 使用图像组合模式中的"destination-out"，当有两个图像重合额时候保留原图未重合部分，其他置于透明;
  
• canvas中添加事件;
  
• 当画布中的透明区域大于整个画布的百分之多少的时候，清空整个画布

//绘制蒙版
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;
}