Canvas舉個慄子

下麵舉一些小例子：

先假設的創建一個上下文環境

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