Canvas標籤學習總結

1.1 canvas初始化

首先使用canvas標籤,通過document.getElementById("2d")獲取元素.canvas的初始化.

•  canvas.width
•  canvas.height
•  canvas.lineWidth
•  canvas.strokeStyle  (字符串顏色)

  if(canvas.getContext("2d"))

     var context = canvas.getContext("2d")

使用context繪製,基於狀態開始繪製.

2.1繪製直線與曲線

•  context.moveTo(x,y)
•  context.lineTo(x,y)
•  context.fillStyle   (字符串顏色)
•  context.fill()
•  context.stroke()

繪製使用 context.beginPath() 開始 使用 context.closePath() 結束. 來區分狀態值.

繪製曲線 context.arc( centerx,centery,radius,startingAngle,endingAngle,anticlockwise = false)     

                    圓心座標x,圓心座標y,半徑,開始角度,結束角度,是否逆時針繪製  

                    結束在切點位置

3.1 繪製動畫基礎

使用canvas 繪製動畫 setInterval()(
匿名函數 function(){
           render();  繪製當前畫面 渲染
           update();  調整數據結構 修正
           },
          時間 (毫秒)

);

context.clearRect(0,0,width,height); 對矩形空間內的圖像進行刷新操作.

繪製矩形

context.rect(x,y,width,height)  
context.fillRect(x,y,width,height) 
context.strokeRect(x,y,width,height)

3.2 線條的屬性

lineCap 設置線條兩端的形狀

       butt(default)、round、square

lineJoin 相交的效果

       miter(default) 尖角、bevel 斜接、round 圓角

       miterLimit 當lineJoin設置爲miter時,內角距離的最大值(線條的實線尖角和寬度線外的線外夾角) 超過的話將使用bevel 默認爲10.

先填充,後描邊.當設置一些線段屬性後,先調用fill(),後調用stroke().

4.1 圖像變換和狀態保存

context.save()   保存canvas狀態

context.restore() 恢復狀態

在繪製圖像時,往往是先繪製基本輪廓再加以變換.

translate(x,y)   位移

rotate(deg)   旋轉

scale(sx,sy)   縮放

function drawStar(cxt,x,y,R,rot){ 

        cxt.save(); 

        cxt.translate(x,y);

        cxt.rotate(rot/180*Math.PI);

        cxt.scale(R,R);

    

        startPath(cxt);

    

        cxt.fillStyle = "#fb3";

//     cxt.strokeStyle = "#fd5";          //當調用scale()時,縮放不僅僅是圖形還包括邊,所以就把描邊相關的註釋掉

//     cxt.lineWidth = 3;

//     cxt.lineJoin = "round";

        cxt.fill();

//     cxt.stroke();

        cxt.restore();

}

4.1.1 變換矩陣

[ a c e ]          a,d 水平、垂直縮放

[ b d f  ]          b,c 水平、垂直傾斜

[ 0 0 1 ]          e,f 水平、垂直位移

設置變換矩陣
     transform(a,b,c,d,e,f)           可級聯效果
     setTransform(a,b,c,d,e,f)     可以使之前失效 設置爲此效果

5.1 填充樣式

fillStyle 除顏色外還可以設置漸變色.

首先,創建一個漸變色,並將其設置關鍵色的屬性.最後設置爲fillStyle的值.

5.1.1 線性漸變:

var grd = context.createLinearGradient(xstart,ystart,xend,yend)

grd.addColorStop(stop,color)      //關鍵色的位置,關鍵色

5.1.2 徑向漸變:

var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1)     //定義兩個圓

grd.addColorStop(stop,color)

5.1.3 背景填充:

createPattern(img,repeat-style)      //repeat-style: no-repeat,repeat-x.repeat-y,repeat

圖片填充:

var backgroundImage = new Image();

backgroundImage.arc = "b.jpg";

backgroundImage.onload = function(){

     var pattern = context.createPattern(backgroundImage,"repeat");

     context.fillStyle = pattern;

}

當然,還可以使用canvas畫布來填充:

var backgCanvas = createBackgroundCanvas();

var pattern = context.createPattern(backgroundVanvas,'repeat');

還可以使用video.

6.1 曲線的繪製

圓弧和圓角矩形

cxt.arc(

     centerx,centery,radius,startingAngle,endingAngle,anticlockwise = false

)

          圓心座標x,圓心座標y,半徑,開始角度,結束角度,是否逆時針繪製.

繪製圓角矩形:

function drawRoundRect(cxt,x,y,width,height,radius){

     cxt.save();

     cxt.translate(x,y);

     pathRoundRect(cxt,width,height,radius);

     cxt.strokeStyle = "black";

     cxt.stroke();

     cxt.restore();

}

function pathRoundRect (cxt,width,height,radius){

     cxt.beginPath();

    

     cxt.arc(width - radius, height - radius,radius, 0 , Math.PI/2);

     cxt.lineTo(radius,height);

     cxt.arc(radius,height-radius,radius,Math.PI/2,Math.PI);

     cxt.lineTo(0,radius);

     cxt.arc(radius,radius,radius,Math.PI,Math.PI*3/2);

     cxt.lineTo(width-radius,0);

     cxt.arc(width-radius,radius,radius,Math.PI*3/2,Math.PI*2);

    

     cxt.closePath();

}

6.2 圓弧
另一種繪製曲線的方法:

cxt.arcTo(
     x1,y1,x2,y2,radius
)

     圓1座標x,圓1座標y(控制點),圓2座標x,圓2座標y(結束點),半徑 
     結束在切點位置


6.3 二次貝賽爾曲線     Bezier

quadraticCurveTo() 

context.moveTo(x0,y0);

context.quadraticCurveTo(

     x1,y1,

     x2,y2) ;

實例: http://tinyurl.com/html5quadratic

6.4 三次貝賽爾曲線 

bezierCurveTo()

context.moveTo(x0,y0);

context.quadraticCurveTo(

     x1,y1,

     x2,y2,

     x3,y3 );

實例: http://tinyurl.com/html5bezier

7-1 文字渲染

context.font = "bolid 40px Arial"            設置字體
context.fillText(String,x,y,[maxlen])          書寫字符串

字型字號和字體
     font 默認值:"20px sans-serif"
     context.font =

     font-style      : normal(default) italic(斜體字) oblique(傾斜字體)

     font-variant   : normal(default) small-caps (小型大寫字母)

     font-weight   : lighter normal(default)(400) bold(700) bolder

     font-size       : 20px(default) 2em 150% ox-small x-small medium ..

     font-family    : 設置多種字體備選  支持@font-face Web安全字體

    
文本對齊
     context.textAlign = left center right (基準是要給定文本初始座標值)
     context.textBaseline = top middle bottom (座標點) alphabetic(default) (英文) ideographic (方塊字) hanging (印度語)

文本度量
     context.measureText(String).width 渲染後的字符串寬度 便於製作文本編輯器 要先設置文本屬性

8-1 陰影
     context.shadowColor          陰影顏色(包括半透明)
     context.shadowOffsetX         陰影位移值
     context.shadowOffsetY
     context.shadowBlur          陰影模糊程度(越大越模糊)
    
     設置一個屬性,便會出現陰影
8-2 global
     globalAlpha = 1(default)     模糊 即將繪製系統的透明度
     globalCompositeOperation = "source-over"(default)     如果兩個圖形互相壓制 (前面在後面上面)
          source-over source-atop source-in source-out
          destination-over destination-atop destination-in destination-out
          lighter copy xor
         
8-3 剪輯區域
     context.clip()     繪製環境的改變