---
tags: HTML5
---

# <i class="fa fa-book"></i> TS Canvas Notes
> [學習HTML5 Canvas參考文件](http://www.runoob.com/w3cnote/html5-canvas-intro.html)
>

## <i class="fa fa-pencil-square"></i> canvas 簡介
> <canvas>是HTML5新增的標籤，呈現一個畫布，接著可以使用 JavaScript 在畫布中繪製圖像的HTML元素。它可以用來製作照片集或者製作簡單(也不是那麼簡單)的動畫，甚至可以進行實時視頻處理和渲染。
>

## <i class="fa fa-pencil-square"></i> Canvas 基本使用

<canvas id="TScanvas" width="1500" height="500">
    寬度預設1500px, 高度預設500px
    這裡打算呈現...圖像及...功能, 而您的瀏覽器不支持這個功能, 
    請升級您的瀏覽器, 或是下載使用 Chrome 瀏覽器。
</canvas>

## <i class="fa fa-pencil-square"></i> 使用 JavaScript 控制 Canvas 畫布 <a href="http://tsweb44.com/TS_EX/canvas/test001.html"> <i class="fa fa-eye"></i> </a>

//設定變數c代表畫布, 變數ctext記錄傳回畫布上繪圖的環境
var c = document.getElementById('TScanvas');
var ctext = c.getContext('2d');

//畫線====================
ctext.beginPath();        //建立一個path路徑線
ctext.moveTo( 50,50 );    //將畫筆移動到指定座標
ctext.lineTo( 300,100 );  //自目前座標位置繪製一條路徑線到指定的座標
ctext.stroke();           //送出繪製出路徑線

//畫三角型====================
ctext.moveTo( 50,200 );   //將畫筆移動到指定座標(x,y)
ctext.lineTo( 300,250 );  //自目前座標位置繪製一條路徑線到指定的座標
ctext.lineTo( 300,200 );  //自目前座標位置繪製一條路徑線到指定的座標
ctext.closePath();        //結束關閉path
ctext.fill();             //封閉的形狀填滿顏色, 預色為黑色
ctext.stroke();           //送出繪製出路徑線

//畫實心矩型====================
ctext.fillStyle = 'rgba(200, 0, 200, 0.5)';  //設定接下來繪製形狀填滿的顏色
ctext.fillRect( 400, 30, 200, 100 );    //繪出填滿顏色的矩形(x,y,width,height)
ctext.clearRect( 450, 50, 50, 50 );     //清除矩形範圍

//畫空心矩型====================
ctext.strokeStyle = 'rgb(255, 0, 0)';        //設定接下來繪製畫筆的顏色
ctext.lineWidth = 5;                         //設定接下來繪製畫筆的寬度(粗細)
ctext.strokeRect( 400, 200, 200, 100 );      //送出繪製出矩形邊框

//畫曲線====================
ctext.strokeStyle = 'rgb(120, 150, 255)';     //設定接下來繪製畫筆的顏色
ctext.lineWidth = 10;                         //設定接下來繪製畫筆的寬度(粗細)

//畫圓====================
ctext.beginPath();  //建立一個path路徑線
ctext.arc(800,100,50,0,2*Math.PI);  
//透過arc()繪製曲線或圓形 
//arc(圓心x,圓心y,半徑,起始角以弧度計,結束角以弧度計,true=逆時針/false=順時針)
ctext.stroke();    //送出繪製出路徑線

//畫3/4弧線====================
ctext.beginPath();  //建立一個path路徑線
ctext.arc(1000,100,50,0,1.5*Math.PI);   
//x座標1000, y座標100, 半徑50, 弧度起始0, 弧度結束1.5PI表示3/4弧度
ctext.stroke();    //送出繪製出路徑線

//畫實心半圓====================
ctext.fillStyle = 'rgb(120, 150, 255)';  //設定接下來繪製形狀填滿的顏色
ctext.beginPath();  //建立一個path路徑線
ctext.arc(1200,100,50,0,Math.PI,false); 
//x座標1200, y座標100, 半徑50, 弧度起始0, 弧度結束1PI表示1/2弧度, 以順時針方向畫
ctext.fill();    //送出繪製出路徑線

//畫線(端點樣式的變化) ====================
var lineCaps = [ "butt", "round", "square" ];

for ( var i = 0; i < 3; i ++ ) { 
  ctext.beginPath();
  ctext.moveTo( 800 + 60 * i , 200 );
  ctext.lineTo( 800 + 60 * i , 400 );
  ctext.lineWidth = 20;
  ctext.lineCap = lineCaps [ i ];  
  //設定線條端點樣式, butt平端點, round圓端點, square方端點
  ctext.stroke();
} 

//畫紅線方便觀察
ctext.beginPath();
ctext.moveTo( 750 , 200 );
ctext.lineTo( 1000 , 200 );
ctext.moveTo( 750 , 400 );
ctext.lineTo( 1000 , 400 ) 
ctext.strokeStyle = "red";
ctext.lineWidth = 1;
ctext.stroke();

### [<i class="fa fa-bookmark"></i> 範例：刮刮卡](https://tsweb.com.tw/TS_EX/canvas/test002.html)

> [參考文件：HTML5 <canvas> 参考手册 @runoob [簡中]](http://www.runoob.com/tags/ref-canvas.html)
> [參考文件：HTML5 <canvas> 参考手册 @w3school [簡中]](http://www.w3school.com.cn/tags/html_ref_canvas.asp)
> [參考文件：HTML5 <canvas> 参考手册 @w3schools [英文]](https://www.w3schools.com/tags/ref_canvas.asp)
>