什么是 Canvas?
HTML5 <canvas> 元素用于圖形的繪制凯傲，通過腳本 (通常是JavaScript)來完成.
<canvas> 標簽只是圖形容器讨勤，必須使用腳本來繪制圖形粟按。
大多數 Canvas 繪圖 API 都沒有定義在 <canvas> 元素本身上漱挚，而是定義在通過畫布的getContext() 方法HTML DOM getContext() 方法")獲得的一個“繪圖環(huán)境”對象上凉倚。
Canvas API 也使用了路徑的表示法。但是洞渔，路徑由一系列的方法調用來定義套媚，而不是描述為字母和數字的字符串，比如調用 beginPath() 和 arc() 方法磁椒。
canvas 繪制
路徑
moveTo(x,y):線條的起始位置
lineTo(x,y):線條的結束位置
線條
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
8AD50F74-07E9-4902-9CBA-10ACEF14B50F.png
圓形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
C2F9123E-7765-4E80-96D0-13B23360EBE2.png
文本
使用 canvas 繪制文本堤瘤，重要的屬性和方法如下：
- font - 定義字體
- fillText(text,x,y) - 在 canvas 上繪制實心的文本
- strokeText(text,x,y) - 在 canvas 上繪制空心的文本
- textBaseline( type )-設置基準線
- textAlign( type )-設置文字對齊方式
context.textBaseline = "middle";
context.textAlign = "center";
context.font="bold 50px Arial";
//fillText("文字",x,y)
context.fillText("hello",100,100);
漸變
線性漸變：createLinearGradient(x1,y1,x2,y2)
x1 漸變開始點的 x 坐標
y1 漸變開始點的 y 坐標
x2 漸變結束點的 x 坐標
y2 漸變結束點的 y 坐標
圓心漸變：createRadialGradient(x0,y0,r0,x1,y1,r1)
x0 漸變的開始圓的 x 坐標
y0 漸變的開始圓的 y 坐標
r0 開始圓的半徑
x1 漸變的結束圓的 x 坐標
y1 漸變的結束圓的 y 坐標
r1 結束圓的半徑
var grd = context.createLinearGradient(0,0,200,0);
var grd = context.createRadialGradient(250,250,100,250,250,200);
