お年玉写真四似(二)——canvas基礎

前の文章では、cssでお年玉写真のぼやけた効果と覗き鏡を実現しました.しかしdemoにより、効果は特によくなく、特にモバイルデバイスのアニメーション性能は受け入れられないことが分かった.canvasで同じ効果を実現することもできますが、本編ではまずcanvasの使用について説明します.
一、canvas基礎
1、canvas本質

a.  ；
b.  ；

2、基本使用

var canvas = document.getElementById('canvas_id'); //  canvas
canvas.height = document.documentElement.clientWidth; //    
canvas.width = document.documentElement.clientHeight;
var context = canvas.getContext('2d'); //  2d  context

context.beginPath();  
  ...... //    
context.closePath();

context.fillStyle = ‘red'; //    ，      strokeStyle
context.fill(); //     ，      stroke()

3、基礎API(パス)

context.moveTo(x,y) //     
context.lineTo(x,y) //     
context.fillRect(x,y,width,height) //     
context.strokeRect(x,y,width,height) //     
//     ，        /  /     /      
context.arc(x, y, radius, starAngle,endAngle, anticlockwise)

context.clearRect(x,y,width,height) //         

//      
context.quadraticCurveTo(qcpx,qcpy,qx,qy)
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 

//   ，           
var lGradient = context.createLinearGradient(xStart,yStart,xEnd,yEnd) //   
var rGradient = context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd) //   
*Gradient.addColorStop(offset,color)

context.translate(x,y) //   
context.scale(x,y) //   
context.rotate(angle) //   
//   ：             ，     

context.globalCompositeOperation=type //    
/*    type：
        source-over（   ）:           
        destination-over:           
        source-in:             ，     ，           
        destination-in:             ，      ，            
        source-out:           
        destination-out:            
        source-atop:           ，     ，                
        destination-atop:          ，     ，                 
        lighter:           ，         
        xor:       
        copy:      
*/

//   
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = 'rgba(100,100,100,0.5)';
context.shadowBlur = 1.5;

//     
context.fillText(text,x,y)  
context.strokeText(text,x,y)

//         
context.save()
context.restore()

context.drawImage //   ——      

二、図面api関連
1、api紹介

context.drawImage(image, x, y, w, h) // Image  、    、    （   ）

context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)//  Image sx、sy  sw、sh          dx、dy  dw、dh     

context.fillStyle ＝ context.createPattern(image,type)
/*  type:   no-repeat:   
          repeat-x:     
          repeat-y:     
          repeat:        */

context.clip() //          

// imagedata  4          rgba  ，               
var imagedata=context.getImageData(sx,sy,sw,sh)
context.putImageData(imagedata,dx,dy,dirtyX,dirtyY,dirtyWidth,dirtyHeight) 

2、神の図形描画モード
rgbaを含むピクチャの各画素のデータを取得できるため、任意の画素の値を任意の値に変更することで、所望の効果を達成することができる.(just like the God)では、私たちはいったい何ができるのでしょうか.一般的には、画素色の計算によってPS中のいくつかの比較的簡単なフィルタ効果を実現することができ、例えば、階調ピクチャは単一画素のrgb値に対して重み付け平均を行うだけでよく、赤色ピクチャは各画素のr値を255に設定するだけでよい.簡単なアルゴリズムをいくつか詳しく紹介します.
三、フィルターアルゴリズム
1、階調

//          ，        ，   0.3、0.59、0.11;
r ＝ g = b = r * rWeight + g * gWeight + b * bWeight; 
//             ，  MAX
r ＝ g = b = Math.max(r, g, b); 

2、階調強化

r =(2*g - b + r)* r / 255;
g =(2*b - g + r)* r / 255;
b =(2*b - g + r)* g / 255;
... //      

3、反転——ネガ効果

r ＝ 255 - r;
g = 255 - g;
b = 255 - b;

4、白黒

var temp ＝ r * rWeight + g * gWeight + b * bWeight; //             
r ＝ g = b = temp > 128 ? 255 : 0; //             ，           

5、まだら

r ＝ r > 128 ? 255 : 0;
g ＝ g > 128 ? 255 : 0;
b ＝ b > 128 ? 255 : 0;

6、ノスタルジック

r = r * 0.393 + g * 0.769 + b * 0.189; 
g = r * 0.349 + g * 0.686 + b * 0.168; 
b = r * 0.272 + g * 0.534 + b * 0.131; 

7、カラーチャンネル——純色チャンネル

//       ，             
r ＝ 255; //   
r= g = 255; //   （ ＋ ）
r ＝ 0；//    ，   （ ＋ ）
//         ，      rgb      ，          

8、シャープ

// rgb                           
function getColor(color) {
      color[i][j] *= 10;
      for (var row = -1; row < 2; row++) {
            for (var col = -1; col < 2; col++) {
                  color[i][j] -= color[i + row][j + col];
            }
      }
}

9、モザイク

//                    
for (var i=0; i< Height; i++) {
    for (var j=0; j

10、ぼやけ

//                  
for (var i=0; i< Height; i++) {
    for (var j=0; j

11、レリーフ

//                
for (var i=0; i< Height; i++) {
    for (var j=0;j

四、フィルターの例
Just Load:http://tkixp9.github.io/redbag/draw_image_as_god.html .
五、canvas実現お年玉写真
TO BE CONTINUED...