瞭解canvas畫布

一、什麼是 Canvas？

• HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製影像
• 畫布是一個矩形區域，可以控制其每一畫素
• canvas 擁有多種繪製路徑、矩形、圓形、字元以及新增影像的方法

二、canvas基本使用

• 新增canvas元素(建立畫布)

<canvas id="myCanvas" width="300" height="300"> </canvas>

canvas畫布的預設尺寸是300*150

• 通過JavaScript繪製影像

<script>
// 1、獲取到canvas元素
var c= document.getElementById("myCanvas");
// 2、執行上下文（繪製畫筆）
var ctx= c.getContext('2d');
// 3、填充矩形
ctx.fillRect(30, 30, 100, 100);
</script>

三、繪製的方法

繪製矩形

  <canvas id="myCanvas" width="200" height="100"></canvas>
  <script>
    //根據指定id，得到物件
    var c=document.getElementById("myCanvas");
    //然後建立context物件
    var cxt=c.getContext("2d");
    //fillStyle屬性可以填充顏色。
    cxt.fillStyle="pink";
    cxt.fillRect(0,0,150,75);
  </script>

繪製線條

 <canvas id="myCanvas" width="200" height="100"></canvas>
    <script>
    //根據指定id，得到物件
    var c=document.getElementById("myCanvas");
    //然後建立context物件
    var cxt=c.getContext("2d");
    cxt.beginPath();//開始繪製路徑（可寫），可理解為斷點，如果只有一個可不寫，若有多個線條，讓上一個和下一個不受影響，就要加上此方法
    cxt.moveTo(10,10);  //移動到指定位置，開始座標
    cxt.lineTo(150,50);  //建立到達位置的一條線，結束座標
    cxt.lineTo(10,50);
    cxt.strokeStyle="pink";  //路徑顏色
    cxt.lineWidth="5";  // 線寬
    cxt.stroke(); //進行繪製（結束，顏色，寬度等都在裡面進行）
    </script>

繪製圓

  <canvas id="myCanvas" width="200" height="100"></canvas>
  <script>
    //根據指定id，得到物件
    var c=document.getElementById("myCanvas");
    //然後建立context物件
    var cxt=c.getContext("2d");
    cxt.beginPath();
    cxt.strokeStyle = "pink";
     //arc(x,y,半徑,起始角度0，結束角度2*Math.PI)
    cxt.arc(95,50,40,0,2*Math.PI);
    cxt.stroke();
  </script>

案例：繪製太極圖

<canvas id="cv" width="300px" height="300px"></canvas>
    <script>
        var canvas = document.getElementById("cv");
        var context = canvas.getContext("2d");
        
        context.beginPath();
        context.arc(100,100,100,0,Math.PI*2);
        context.closePath();
        context.stroke();
        
        context.beginPath();
        context.arc(100,100,100,1.5,Math.PI*1.5);
        context.closePath();
        context.fill();
        		
        context.beginPath();
        context.arc(100,50,50,0,Math.PI*2);
        context.fillStyle = "white";
        context.closePath();
        context.fill();
        
        context.beginPath();
        context.arc(100,150,50,0,Math.PI*2);
        context.fillStyle = "black";
        context.closePath();
        context.fill();
        
        context.beginPath();
        context.arc(100,50,15,0,Math.PI*2);
        context.fillStyle = "black";
        context.closePath();
        context.fill();
        
        context.beginPath();
        context.arc(100,150,15,0,Math.PI*2);
        context.fillStyle = "white";
        context.closePath();
        context.fill();
    </script>