html5 畫圖

<canvas></canvas>是html5出現的新標籤

context是一個封裝了不少繪圖功能的對象，獲取這個對象的方法是  var context=canvas.getContext("2d");

canvas元素繪製圖像的時候有2種方法，分別是 

      context.fill() //填充

      context.stroke() //繪製邊框

style:在進行圖形繪製前，要設置好繪圖的樣式

     context.fillStyle  //填充的樣式

     context.strokeStyle  //邊框樣式

 

context.lineWidth  //圖形邊框寬度

 

顏色表示方式：  直接用顏色名稱 ： 「red」  

                          十六進制： 「#FFFFFF」

　　　　　　　  rgb(1-255,1-255,1-255)

　　　　　　　  rgba(1-255,1-255,1-255,透明度)

 

 繪製矩形： context.fillRect(x,y,width,height) 

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

 x:矩形起點橫座標（座標原點爲canvas的左上角，固然確切的來講是原始原點，後面寫到變形的時候就懂了，如今暫時不用關心）

y:矩形起點縱座標

width:矩形長度

height:矩形高度

 

清除矩形區域：context.clearReact(x,y,width,height)

x:清除矩形起點橫座標

y:清除矩形起點縱座標

width：清除矩形長度

height：清除矩形寬度

 

圓弧：context.arc(x,y,radius,starAngle,endAngle,anticlockwise)

 x:圓心的x座標

y：圓心的y座標

starAngle:開始角度

endAngle：結束角度

anticlockwise：true爲逆時針，false爲順時針

 

 路徑：context.beginPath()

            context.closePath()

function draw23(id) {
            var canvas = document.getElementById(id);
            if (canvas == null) {
                return false;
            }
            var context = canvas.getContext('2d');
            var n = 0;
           
            //左側1/4圓弧
            context.beginPath();
            context.arc(100, 150, 50, 0, Math.PI/2 , false);
            context.fillStyle = 'rgba(255,0,0,0.25)';
            context.fill();
            context.strokeStyle = 'rgba(255,0,0,0.25)'
            context.closePath();
            context.stroke();

            //右側1/4圓弧
            context.beginPath();
            context.arc(300, 150, 50, 0, Math.PI/2 , false);
            context.fillStyle = 'rgba(255,0,0,0.25)';
            context.fill();
            context.strokeStyle = 'rgba(255,0,0,0.25)';
            context.closePath();
            context.stroke();
        }

　結論　

    一、系統默認在繪製第一個路徑的開始點爲beginPath

    *二、若是畫完前面的路徑沒有從新指定beginPath，那麼畫第其餘路徑的時候會將前面最近指定的beginPath後的所有路徑從新繪製

    三、每次調用context.fill（）的時候會自動把當次繪製的路徑的開始點和結束點相連，接着填充封閉的部分

    ps：書本的結論是   若是沒有closePath那麼前面的路勁會保留，實驗證實正確的結論是 若是沒有從新beginPath那麼前面的路勁會保留

    ps1：若是你真心凌亂了，那麼記住每次畫路徑都在先後加context.beginPath()   和context.closePath()就行

 

繪製線段：context.moveTo(x,y)

　　　　　context.lineTo(x,y)

x:x座標

y:y座標

每次畫線都是從moveTo 的點到lineTo的點

若是沒有moveTo那麼第一次lineTo的效果和moveTo同樣

每次lineTo後若是沒有moveTo，那麼下次lineTo的開始點爲前一次lineTo的結束點

 

 

繪製貝塞爾曲線（貝濟埃、bezier） context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 

繪製二次樣條曲線 context.quadraticCurveTo(qcpx,qcpy,qx,qy)

 cp1x:第一個控制點x座標

    cp1y:第一個控制點y座標

    cp2x:第二個控制點x座標

    cp2y:第二個控制點y座標

    x:終點x座標

    y:終點y座標

 

    qcpx:二次樣條曲線控制點x座標

    qcpy:二次樣條曲線控制點y座標

    qx:二次樣條曲線終點x座標

    qy:二次樣條曲線終點y座標

 

線性漸變 var lg= context.createLinearGradient(xStart,yStart,xEnd,yEnd)

 線性漸變顏色lg.addColorStop(offset,color)

    xstart:漸變開始點x座標

    ystart:漸變開始點y座標

    xEnd:漸變結束點x座標

    yEnd:漸變結束點y座標

 

    offset:設定的顏色離漸變結束點的偏移量(0~1)

    color:繪製時要使用的顏色

 

 圖形變形

一、平移context.translate(x,y)

    x:座標原點向x軸方向平移x

    y:座標原點向y軸方向平移y

二、縮放context.scale(x,y)

    x:x座標軸按x比例縮放

    y:y座標軸按y比例縮放

三、旋轉context.rotate(angle)

    angle:座標軸旋轉x角度（角度變化模型和畫圓的模型同樣）

 

矩陣變換 context.transform(m11,m12,m21,m22,dx,dy)

 

    http://hi.baidu.com/100912bb_bb/item/90c4a7489518b0fa1281daf1

 

圖形組合 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 :陰影的橫向位移量（默認值爲0）

    context.shadowOffsetY :陰影的縱向位移量（默認值爲0）
    context.shadowColor :陰影的顏色
    context.shadowBlur :陰影的模糊範圍（值越大越模糊）

 

 

繪製圖像 

繪圖：context.drawImage

圖像平鋪：context.createPattern(image,type)

圖像裁剪：context.clip()

像素處理：var imagedata=context.getImageData(sx,sy,sw,sh)

 

繪圖 context.drawImage

    context.drawImage(image,x,y)

        image:Image對象var img=new Image(); img.src="url(...)";

        x:繪製圖像的x座標

        y:繪製圖像的y座標

    context.drawImage(image,x,y,w,h)

        image:Image對象var img=new Image(); img.src="url(...)";

        x:繪製圖像的x座標

        y:繪製圖像的y座標

        w:繪製圖像的寬度

        h:繪製圖像的高度

    context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh):選取圖像的一部分矩形區域進行繪製

        image:Image對象var img=new Image(); img.src="url(...)";

        sx：圖像上的x座標

        sy：圖像上的y座標

        sw：矩形區域的寬度

        sh：矩形區域的高度

        dx：畫在canvas的x座標

        dy：畫在canvas的y座標

        dw：畫出來的寬度

        dh：畫出來的高度

 

圖像平鋪 context.createPattern(image,type)

    type:
        no-repeat:不平鋪

        repeat-x:橫方向平鋪

        repeat-y:縱方向平鋪

        repeat:全方向平鋪

 

圖像裁剪：context.clip()

    context.clip()只繪製封閉路徑區域內的圖像，不繪製路徑外部圖像，用的時候

        先建立裁剪區域

        再繪製圖像（以後繪製的圖形都會採用這個裁剪區域，要取消這個裁剪區域就須要用到保存恢復狀態，下面有講）

 

像素處理：

獲取像素顏色數組： var imagedata=context.getImageData(sx,sy,sw,sh)

    sx:cavas的x軸座標點

    sy:canvas的y軸座標點

    sw:距離x的寬度

    sh:距離y的高度

 

設置像素顏色：context.putImageData(imagedata,dx,dy,dirtyX,dirtyY,dirtyWidth,dirtyHeight) 
    對imagedata數組中的各個像素的r、g、b、a值進行修改，再調用putImageData方法進行繪製

        imagedata:修改後的imagedata

        dx:重繪圖像的起點橫座標（重繪的起點和原來的圖像一致的話就會把原來的圖形覆蓋掉，看起來就像是原來的圖像變成如今的圖像同樣）

        dy:重繪圖像的起點縱座標

        //如下可選參數，設置重繪的矩形範圍，若是缺省，默認會重繪全部的imegedata

        dirtyX:矩形左上角x軸座標

        dirtyY:矩形左上角y軸座標

        dirtyWidth:矩形長度

        dirtyHeight:矩形高度

 

繪製文字

填充文字：context.fillText(text,x,y)  

繪製文字輪廓 context.strokeText(text,x,y)

 text:要繪製的文字

     x:文字起點的x座標軸

     y:文字起點的y座標軸

     context.font:設置字體樣式

     context.textAlign:水平對齊方式

          start、end、right、center

     context.textBaseline:垂直對齊方式

          top、hanging、middle、alphabetic、ideographic、bottom

     var length=context.measureText(text):計算字體長度(px)

那麼能不能計算高度啊，很遺憾，不能

 

保存和恢復狀態 

保存：context.save()

恢復：context.restore()

  context.save()：調用該方法，會保存當前context的狀態、屬性（把他理解成遊戲存檔）

    context.restore():調用該方法就能恢復到save時候context的狀態、屬性（遊戲回檔）

 

保存文件  canvas.toDataURL(MIME)

 

結合setInterval製做動畫

 

 

轉自：http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html#18