canvas:小白的學習之路

研究html5 canvas製做簡易動畫

初學canvas，都是一些我在學習中的一下自我理解的教程。

目錄

1. canvas前期的準備
2. canvas基礎的一些功能
3. canvas動畫效果
4. 參考資料

效果：傳送門

canvas前期的準備：

1. 首先要在html中建立一個canvas標籤。

2. 在js裏，首先須要定義這個canvas元素，在建立`context`對象，爲了調用`context`對象裏的方法。

3. `context`對象裏有不少方法，你們能夠用打印出來，對應開發文檔查看已經含義，由於屬性過分，我在這裏不一一列舉出來。

前期的準備工做完成，讓咱們開始正題吧。

canvas基礎的一些功能

1. 繪製純色矩形
    // 在畫布裏填充一個顏色爲黑色,距左10 距上20 寬度400 高度100 的矩形。
    // context.fillStyle=color|gradient|pattern;        
    // CSS 顏色值。默認值是 #000000。|| 用於填充繪圖的漸變對象 || 用於填充繪圖的 pattern 對象
    c.fillStyle="#000";    
    // context.fillRect(x,y,width,height);
    //矩形左上角的 x 座標 || 矩形左上角的 y 座標 || 矩形的寬度，以像素計 || 矩形的高度，以像素計
    c.fillRect(10,20,480,100)    
2. 繪製一條實體斜線
    // 在畫布中繪製一條從畫布起始(10,120)到(410,180)的一條斜線。
    // context.moveTo(x,y);                              
    // 路徑的目標位置的 x 座標    路徑的目標位置的 y 座標
    c.moveTo(10,130);
    // context.lineTo(x,y);                            
    // 路徑的目標位置的 x 座標    路徑的目標位置的 y 座標            
    c.lineTo(490,200);
    // context.strokeStyle=color|gradient|pattern;
    // CSS 顏色值。默認值是 #000000。|| 用於填充繪圖的漸變對象 || 用於填充繪圖的 pattern 對象
    // c.strokeStyle="yellow";
    // context.stroke();
    // 按照對應的路徑繪製圖像。            
    c.stroke();                                                    
            
3. 在畫布上繪製一個圓形
    // context.beginPath();
    // 建立一條路徑，或重置當前的路徑。
    c.beginPath();                                             
    // context.arc(x,y,r,sAngle,eAngle,counterclockwise);     
    // x: 圓的中心的 x 座標。，
    // y: 圓的中心的 y 座標。，    
    // r: 圓的半徑。，    
    // sAngle: 起始角，三點鐘位置是 0 度。，
    // eAngle: 結束角，以弧度計。
    // counterclockwise: 可選。規定應該逆時針仍是順時針繪圖。False = 順時針，true = 逆時針。
    c.arc(250,250,40,0,2*Math.PI);    
    // context.stroke();
    // 按照對應的路徑繪製圖像。
    c.stroke();        
                                        
4. 在畫布上繪製文字(實心)
    // 在畫布上繪製文字(實心)
    // context.font="italic small-caps bold 12px arial";
    c.font = "900 40px Arial";
    // context.fillText(text,x,y,maxWidth);        
    // 規定在畫布上輸出的文本。  x軸  y軸    可選。容許的最大文本寬度，以像素計。        
    c.fillText("侯 大 大",30,350);    
   
5. 在畫布上繪製文字(空心)
    // context.font="italic small-caps bold 12px arial";
    c.font = "900 40px Arial";            
    // context.strokeText(text,x,y,maxWidth);    
    // 規定在畫布上輸出的文本。  x軸  y軸    可選。容許的最大文本寬度，以像素計。
    c.strokeText("侯 大 大",320,350);

canvas動畫效果

1. 猩猩走路和盒子loading
    // 在畫布上繪製圖片
    var oImg = new Image(),                                // 猩猩
        oImg2 = new Image();                            // 盒子loading
        
    oImg.onload=function(){    
        // var pat = c.createPattern(oImg,"no-repeat");    
        // context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");     
        // 規定要使用的圖片、畫布或視頻元素。 水平和垂直方向重複。
        // 圖片、剪切的x座標、剪切的Y軸座標、剪切圖像的寬度、剪切圖像的高度、圖像x座標、圖像y座標、圖像的寬度、圖像的高度
        // context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
        var step=-80,
            count = 0,
            timer = setInterval(function(){
                count++;
                step+=10;
                if(count==4){
                    count=0;
                }
                if(step>=can.width){
                    step = -80;
                }
                c.clearRect(0,400,can.width,120);
                c.drawImage(oImg,
                    count*40,112,40,56,
                    step,400,40*2,56*2
                );
            },300);
    }
    oImg.src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1527675707&di=5e410e2de9d22fc58ba719647baffee2&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fwh%253D600%252C800%2Fsign%3Da1b3b45ecaef76093c5e91991eed8ff4%2F09fa513d269759ee902ad008b3fb43166c22dfff.jpg";
    
    // 盒子loading
    oImg2.onload=function(){
        var count = 0,
            top = 0,
            timer = setInterval(function(){
                count++
                if(count==5){
                    count = 0;
                    top++;
                }

                if(top==5){
                    top =0;
                }
                c.clearRect(0,550,can.width,can.height);
                c.drawImage(oImg2,
                    120*count,105*top,120,105,
                    180,550,120,105
                );
            },60);
            
    };
    oImg2.src="img/hezi.png"

參考資料

1. 菜鳥教程：http://www.runoob.com/html/html5-canvas.html
2. w3school：http://www.w3school.com.cn/html5/html5_ref_canvas.asp