1. 繪制三角形
fill是填充面（實心），stroke是畫線（空心）
<script type="text/javascript">
//首先，找到 <canvas> 元素:
var canvas = document.getElementById('myCanvas');
//然后，創建 context 對象：
//getContext("2d") 對象是內建的 HTML5 對象，
//擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
var context = canvas.getContext('2d');
//canvas 是一個二維網格。
//canvas 的左上角坐標為 (0,0)
context.beginPath();
//moveTo(x,y) 定義線條開始坐標
context.moveTo(0,0);
//lineTo(x,y) 定義線條結束坐標
//繪制三角形
context.lineTo(0,100);
context.lineTo(100,100);
context.lineTo(0,0)
context.strokeStyle = "#0000FF";
context.stroke();
// context.lineWidth = 10;
// context.fillStyle = "#008000";
// context.fill();
2. 畫圓
lineCap:線帽 有三個參數
- butt 默認。向線條的每個末端添加平直的邊緣。
- round 向線條的每個末端添加圓形線帽。
- square 向線條的每個末端添加正方形線帽。
context.arc(參數1,參數2,參數3,參數4,參數5,參數6);
- 參數1 參數2 圓形原點的坐標
- 參數3 半徑
- 參數4 繪制圓形的起始角度
- 參數5 繪制圓形的結束角度
- 參數6 順時針 | 逆時針 參數是布爾：true 逆時針，false 順時針
context.arc(200,100,100,0,Math.PI,false);
//畫圓
context.beginPath(); // 重新開啟一個新的圖層
context.arc(200,100,100,0,Math.PI,false);
context.lineCap = "round";
context.lineWidth = 15;
context.strokeStyle = "aquamarine";
context.stroke();
3. 矩形
context.rect(參數1,參數2,參數3,參數4);
- 參數1 ,參數2 矩形繪制的起點位置（參數1為X軸的坐標，參數2為Y軸的坐標）
- 參數3,矩形的寬
- 參數4矩形的高
創建線條漸變 context.createLinearGradient(參數1,參數2,參數3,參數4);
- 參數1 ,參數2 漸變顏色開始的位置（參數1為X軸的坐標，參數2為Y軸的坐標）
- 參數3,參數4 漸變顏色結束的位置（參數3為X軸的坐標，參數4為Y軸的坐標）
grd.addColorStop(參數1,參數2);
- 參數1 ,0~1之間的數
- 參數3,參數4 顏色
//矩形
context.beginPath();
context.rect(0,200,200,100);
var grd = context.createLinearGradient(0,200,200,200);
grd.addColorStop(0,"red");
grd.addColorStop(0.5,"green");
grd.addColorStop(1,"blue");
context.fillStyle = grd;
context.fill();
創建一個徑向/圓漸變 context.createRadialGradient(xStart, yStart,radiusStart,xEnd, yEnd,radiusEnd);
-xStart, yStart 開始圓的圓心的坐標。
-radiusStart 開始圓的半徑。
-xEnd, yEnd 結束圓的圓心的坐標。
-radiusEnd 結束圓的半徑。
context.beginPath();
context.rect(0,200,200,100);
var grd = context.createRadialGradient(200,200,50,200,200,200);
grd.addColorStop(0,"red");
grd.addColorStop(0.5,"green");
grd.addColorStop(1,"blue");
context.fillStyle = grd;
context.fill();
4. 文本
- font - 定義字體
- fillText(text,x,y) - 在 canvas 上繪制實心的文本
- strokeText(text,x,y) - 在 canvas 上繪制空心的文本
- context.textBaseline 垂直對齊方式
- context.textAlign 水平對齊方式
// bold 可以省略 Arial 不可以省略
context.font = "bold 50px Arial";
context.textBaseline = "middle";
context.textAlign = "center";
var grd = context.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"blue");
grd.addColorStop(0.5,"yellow");
grd.addColorStop(1,"red");
context.fillStyle = grd;
context.fillText("hello",100,100);
