TS Canvas Notes

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

//設定變數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();