html5學習——canvas

   前言：才簡單的學習完一些關於canvas的知識，簡單的進行各總結，複習。

   canvas，是html5中新增的一個元素，它至關因而在頁面上放置了一個"畫布"。咱們能夠在這張畫布上繪製咱們想要的圖形及文字。

   首先是在頁面中繪製一張「畫布」，具體操做以下：

 <canvas id="canvas" width="1200" height="780" >
      Your browser does not support the canvas element.(若是瀏覽器不支持canvas，顯示本段文字)
  </canvas>

   讓後將canvas與javascript中的代碼進行綁定，具體操做以下：

var canvas = document.getElementById('canvas');
            if(canvas == null){
                return false;
            }
            var context = canvas.getContext('2d');

  其中canvas.getContext(contextID)是方法返回一個用於在畫布上繪圖的環境。

  參數 contextID 指定了您想要在畫布上繪製的類型。當前惟一的合法值是 "2d"，它指定了二維繪圖，而且致使這個方法返回一個環境對象，該對象導出一個二維繪圖 API。

  下面是對canvas對象相關屬性及方法進行介紹。

  ① 圖形的繪製

  1.矩形的繪製

   矩形的繪製有兩種方法一是fill，這是一種實心得繪製，另外一種爲stroke繪製出的矩形爲空心（只具備外邊框）。

context.fillRect(x,y,width,height); 繪製實心得矩形  x爲起點的橫座標，y爲起點的縱座標，width是這個矩形的寬度，height爲這個矩形的高度。

context.strokeRect(x,y,width,height);繪製空心的矩形，參數意義同context.fillRect(x,y,width,height);
fillStyle和strokeStyle分別是對所繪製的矩形的實體和邊框的顏色進行設置。
context.rect(x,y,width,height)繪製矩形

context.clearRect(x,y,width,height); 清空給定矩形內的指定像素。具體用法以下：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);

　2.對圓形的繪製

     context.arc(x,y,r,sAngle,eAngle,counterclockwise);其中x爲圓形橫座標，y爲圓心縱座標，r是圓的半徑，sAngle起始角，以弧度計（以3點鐘的方向爲起點），eAngle是圓弧結束的角度，counterclockwise是對順時針和逆時針進行設置，默認和true爲順時針。

   ②路徑

     其中經常使用的爲moveTo(x,y)和lineTo(x,y)

     moveTo(x,y)把路徑移動到畫布中的指定點，不建立線條。

     lineTo(x,y)添加一個新點，而後在畫布中建立從該點到最後指定點的線條。

     beginPath() 方法開始一條路徑，或重置當前的路徑。請使用這些方法來建立路徑：moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。

     closePath() 方法建立從當前點到開始點的路徑。

     stroke() 方法會實際地繪製出經過 moveTo() 和 lineTo() 方法定義的路徑。默認顏色是黑色。

     clip()方法從原始畫布中剪切任意形狀和尺寸。一旦剪切了某個區域，則全部以後的繪圖都會被限制在被剪切的區域內（不能訪問畫布上的其餘區域）。您也能夠在使用 clip() 方法前經過使用 save() 方法對當前畫布區域進行保存，並在之後的任意時間對其進行恢復（經過 restore() 方法）。

   3.漸變

//漸變線性變化的運用 須要使用到的對象爲 creatLinearGradient（startX，stratY，endX，endY）
         //addColorStop（offset，color）offset是設定顏色離開漸變始點的偏移量，範圍爲0-1
            var li1 = context.createLinearGradient(0,0,0,200);
            li1.addColorStop(0,'black');
            li1.addColorStop(0.6,'yellow');
            li1.addColorStop(1,'green');
            context.fillStyle = li1;
            context.fillRect(400,0,300,200);
         //漸變徑向繪製
        //須要用到的函數爲createRadialGradient（startX,startY，radiusStart，endX，endY，radiuseEnd）
            var li2 = context.createRadialGradient(100,400,100,100,400,50);
            li2.addColorStop(0,'black');
            li2.addColorStop(0.6,'yellow');
            li2.addColorStop(1,'green');
            context.fillStyle = li2;
            context.fillRect(0,300,200,200)

  4.圖形組合 

     

      context.globalCompositeOperation = type，其中type爲以上值；

 5.圖片

   首先，引入Image對象

 var image = new Image();
     image.src = './imgs/xg.jpg';

 context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); img是規定要使用的圖像、畫布或視頻。 sx，sy分別是開始剪切的 x ，y座標位置，爲可選參數。swidth,sheight分別是被剪切圖像的寬度和高度，爲可選參數。x,y分別是在畫布上放置圖像的 x 座標位置。width,height分別是。要使用的圖像的寬度和高度，爲可選參數。（伸展或縮小圖像）。
 
6.文字
Canvas對於繪製文字提供了兩種方法 fillText(填充模式) 或 strokeText(邊框模式)。 
   fillText(String, x, y, [maxWidth]); 
   strokeText(String, x, y, [maxWidth]);
 String爲你要繪製的文字,x,y爲文字的座標最後有一個可選參數maxWidth,文字的最大寬度,防止文字在超出長度時,會顯示錯位。
 與繪製基本圖形的步驟是同樣的，首先要設置字體的樣式 ： 
    font ： 文字字體，依據我的喜愛了 
    textAlign ： 文字的水平對齊方式，值start(默認),end,left,right,center 
    textBaseline : 文字的垂直對齊方式,值top,hanging,middle,alphabetic(默認),ideographic,bottom 
 measureText(String) : 能夠獲取一個TextMetrices對象,他包含了文字繪製後的寬度
7.其餘
  save()和restore()

     save()和restore()方法是繪製複雜圖形必不可少的方法.它們分別是用來保存和恢復 canvas 狀態的，都沒有參數。

　　Canvas 狀態是以堆(stack)的方式保存的，每一次調用 save 方法，當前的狀態就會被推入堆中保存起來。這種狀態包括：當前應用的變形(即移動，旋轉和縮放，見下):

　　strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值

　　你能夠調用任意屢次 save 方法。每一次調用 restore 方法，上一個保存的狀態就從堆中彈出，全部設定都恢復。