HTML5 Canvas基礎概念（一）

Canvas基礎知識：Canvas屬于行内元素，使用Canvas繪制圖形步驟：

1、擷取Canvas對象

2、擷取上下文環境對象context。

3、開始繪制圖形

在Canvas對象中常用屬性

屬性	說明
width	Canvas的寬度
height	Canvas的高度

Canvas常用的方法

屬性	說明
getContext("2d")	擷取Canvas2D上下文環境對象
toDataURL()	擷取Canvas對象産生的位圖的字元串

• HTML5 Canvas暫時隻提供2D繪圖API，3D繪圖可以使用HTML5的WebGL進行繪制。

基本圖形的繪制

在Canvas中，基本圖形有直線圖形和曲線圖形。

1. 直線繪制，使用moveTo()和lineTo()來繪制直線，文法：

ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke()      

moveTo()的含義是把畫筆移動到起點(x1,y1)，開始繪圖。lineTo()含義是将畫筆從起點開始畫線，一直到終點坐标(x2,y2)。當然，moveTo()和lineTo()方法隻是确定起點和終點而已，并沒有開始繪制。stroke()方法的含義就是連接配接起點和終點，完成繪圖。當lineTo()重複使用時，最後一個lineTo()就是終點，繪制成多條線。

1. 矩形繪制（描邊和填充矩形），可以把moveTo()和lineTo()配合使用繪制一個矩形，但是這樣繪制矩形代碼量過多，Canvas提供了獨立的方法來繪制矩形。文法：

cxt.strokeStyle = 屬性值;
ctx.strokeRect(x,y,width,height);      

strokeStyle屬性取值有三種，即顔色值、漸變色、圖案。

strokeRect()方法用于确定矩形的位置坐标。

填充矩形的文法：

ctx.fillStyle = "屬性值";
ctx.fillRect(x,y,width,height);      

除了使用strokeRect()和fillRect()兩種方法外，還可以使用rect()方法。者三種方法的參數是一樣的，不同之處在實作效果方面，strokeRect()和fillRect()在調用之後會立即繪制矩形。rect()方法在調用之後并不會立即繪制，還需要調用stroke()或者fill().

rect(x,y,width,height);      

還可以使用clearRect()方法清空指定矩形區域

1. 曲線圖形，會涉及到兩種情況：曲線和弧線。兩者是有差別的，弧線是圓周的一部分，曲線則是不一定（當曲線上每一點的曲率都相同時，曲線就是弧線）。

圓形

使用arc()方法來繪制圓形，文法：

ctx.beginPath();
ctx.arc(x,y,redius,startAngle,endAngle,anticlockwise);

其中anticlockwise是一個布爾值，為ture時，按照逆時針繪制圓形，預設值是false。      

描邊圓形文法：

//狀态描述
ctx.beginPath();
ctx.arc(x,y,redius,startAngle,endAngle,anticlockwise);
ctx.closePath();

//描邊
ctx.strokeStyle = "顔色值";
ctx.stroke();      

例如：半圓與圓形

<canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }

        window.onload = function(){
            var canvas = $("canvas");
            var ctx = canvas.getContext("2d");

            //繪制半圓
            ctx.beginPath();
            ctx.arc(50,50,50,0,Math.PI,true);
            ctx.closePath();

            //描邊
            ctx.strokeStyle = 'pink';
            ctx.stroke();

            //圓形
            ctx.beginPath();
            ctx.arc(100,100,50,0,2*Math.PI,true);
            ctx.closePath();

            ctx.strokeStyle = "HotPink";
            ctx.stroke();
        }
    </script>      

填充圓形文法：

ctx.beginPath();
ctx.arc(x,y,redius,startAngle,endAngle,anticlockwise);
ctx.closePath();

ctx.fillStyle();
ctx.fill();      

上面的例子中圓形填充顔色：

<canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }

        window.onload = function(){
            var canvas = $("canvas");
            var ctx = canvas.getContext("2d");

            //繪制半圓
            ctx.beginPath();
            ctx.arc(50,50,50,0,Math.PI,true);
            ctx.closePath();

            //描邊
            ctx.fillStyle = 'pink';
            ctx.fill();

            //圓形
            ctx.beginPath();
            ctx.arc(100,100,50,0,2*Math.PI,true);
            ctx.closePath();

            ctx.fillStyle = "HotPink";
            ctx.fill();
        }
    </script>      

1. 弧線，常見的兩種方法：arc()和arcTo()。arc()畫弧線的文法：

ctx.beginPath();
ctx.arc(x,y,redius,startAngle,endAngle,anticlockwise);

ctx.strokeStyle = "顔色值";
ctx.stroke()

//arc()方法繪制弧線不需要closePath()關閉路勁。因為弧線不是一個閉合的圖形。      

如：

<canvas id="canvas" width="200" height="200"></canvas>
function $(id){
  return document.getElementById(id);
}

 window.onload = function () {
    var cnv = $("canvas");
    var cxt = cnv.getContext("2d");
    cxt.beginPath();
    cxt.arc(70, 70, 50, 0, - Math.PI /2, true);
    cxt.stroke();

}      

arcTo()畫弧線

文法：

ctx.arcTo(cx,cy,x2,y2,redius);

//(cx,cy)是控制點的坐标，(x2,y2)是結束點的坐标，
//一般情況下是由moveTo()或者lineTo()提供起點，arcTo()提供控制點和終點      

如：

<canvas id="canvas" width="200" height="200"></canvas>
<script>
    function $(id){
      return document.getElementById(id);
    }
    window.onload = function(){
      var canvas = $("canvas");
      var ctx = canvas.getContext("2d");

      //ctx.moveTo(20,20);
      ctx.lineTo(70,20);
      ctx.arcTo(120,20,120,70,50);
      ctx.lineTo(120,120);
      ctx.stroke()
    }
</script>      

圓角矩形的封裝

<canvas id="canvas" width="200" height="200"></canvas>
<script>
    function $(id){
      return document.getElementById(id);
    }

    window.onload = function(){
      var canvas = $("canvas");
      var ctx = canvas.getContext("2d");
      createRect(ctx,100,100,20,20,20);
      ctx.fillStyle = "HotPink";
      ctx.fill();
    }
    //封裝圓角矩形函數
    function createRect(ctx,width,height,r,offsetX,offsetY){
        ctx.beginPath();
        ctx.moveTo(offsetX+r,offsetY);
        ctx.lineTo(offsetX+width-r,offsetY);
        ctx.arcTo(offsetX+width,offsetY,offsetY+width,offsetY+r,r);
        ctx.lineTo(offsetX+width,offsetY+height-r);
        ctx.arcTo(offsetX+width,offsetY+height,offsetX+width-r,offsetY+height,r);
        ctx.lineTo(offsetX+r,offsetY+height);
        ctx.arcTo(offsetX,offsetY+height,offsetX,offsetY+height-r,r);
        ctx.lineTo(offsetX,offsetY+r);
        ctx.arcTo(offsetX,offsetY,offsetX+r,offsetY,r);
        ctx.closePath();
      }
</script>      

二次貝塞爾曲線

在canvas中，常見的貝塞爾曲線有兩種：二次貝塞爾曲線和三次貝塞爾曲線，使用quadraticCurveTo()方法來繪制二次貝塞爾曲線，文法：

ctx.quadraticCurveTo(cx,cy,x2,y2);
//(cx,cy)表示控制點的坐标，(x2,y2)表示終點坐标      

<canvas id="canvas" width="500" height="400"></canvas>
<script>
    function $(id){
        return document.getElementById(id);
    }

    window.onload = function(){
        var canvas  = $("canvas");
        var ctx = canvas.getContext("2d");

        ctx.lineTo(30,120);
        //ctx.moveTo(30,120);
        ctx.quadraticCurveTo(100,20,160,120);
        ctx.stroke();
    }
</script>      

ctx.bezierCurveTo(cx1,cy1,cx2,cy2,x,y);

//其中(cx1,cy1),(cx2,cy2)分别是兩個控制點，(x,y)是終點。