【HTML5】記錄一下學習HTML5的一些新元素------（1）

一、Canvas

（canvas 解決了與靜態圖片互動的問題，可以動態建立和操作圖形影像） —這句話目前還不明白什麼意思，放在這裡
<canvas> 標籤只是圖形容器，本身沒有繪圖能力， 必須使用指令碼來繪製圖形。

• 預設情況下 元素沒有邊框和內容。
• 一個畫布 Canvas 在網頁中是一個矩形框，通過 <canvas> 元素來繪製.
• 標籤通常需要指定一個id屬性 (指令碼中經常引用)，width 和 height 屬性定義的畫布的大小。

1、 使用JS 來繪製影像：

• getContext("2d")： 內建的 HTML5 物件，擁有多種繪製路徑、矩形、圓形、字元以及新增影像的方法
• fillStyle：填充矩形的樣式。預設設定是黑色。
• fillRect(x,y,width,height)： 填充矩形的大小和方式；從（x，y）開始，繪製 width* height 大小的矩形；

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的瀏覽器不支援 HTML5 canvas 標籤。
</canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

2、Canvas - 座標

• canvas 是一個二維網格。
• canvas 的左上角座標為 (0,0)
• 上面的 fillRect 方法擁有引數 (0,0,150,75)。
• 意思是：在畫布上繪製 150x75 的矩形，從左上角開始 (0,0)。
  

3、Canvas - 路徑

• 在Canvas 上畫線需要用到：
• moveTo(x,y) ：定義線條開始座標
• lineTo(x,y) ：定義線條結束座標
• stroke() ：繪製出 moveTo() 到 lineTo() 方法之間的路徑。預設顏色是黑色。相當於 墨水
• beginPath()：開始一條路徑，或重置當前的路徑。就比如在畫完一條路徑，需要再另外畫一條路徑時，就需要用到；如果不用，新路徑的樣式就會覆蓋掉舊路徑的樣式。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的瀏覽器不支援 HTML5 canvas 標籤。</canvas>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke(); 

在canvas中繪製圓形需要用到：

• arc() 方法建立弧/曲線（用於建立圓或部分圓）。
• arc(x,y,r,start,stop，counterclockwise)：（x，y）是圓心；r：半徑；start：起始角；stop：結束角；counterclockwise：可選。規定應該逆時針還是順時針繪圖。False = 順時針，true = 逆時針。
• 通過 arc() 來建立圓，請把起始角設定為 0，結束角設定為 2*Math.PI。
  

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的瀏覽器不支援 HTML5 canvas 標籤。
</canvas>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();

4、Canvas - 文字

• 使用 canvas 繪製文字：
• font ： 定義字型樣式和大小
• fillText(text,x,y) ： 在 canvas 上繪製實心的文字 （相當於填充）；text：填充的文字內容；（x，y）：文字在畫布中開始的位置
• 可以用fillStyle =“red” 填充文字的顏色
• strokeText(text,x,y) ： 在canvas 上繪製空心的文字（相當於用筆觸畫的）

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的瀏覽器不支援 HTML5 canvas 標籤。</canvas>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Arial";
ctx.fillText("Hello World",10,50);

//空心的文字內容
ctx.strokeText("Hello World",10,50);

5、Canvas - 漸變

• 漸變可以填充在矩形, 圓形, 線條, 文字等等，有兩種不同的方式來設定Canvas漸變：
• createLinearGradient(x,y,x1,y1) ： 建立線條漸變
  createRadialGradient(x,y,r,x1,y1,r1) ： 建立一個徑向/圓漸變
• 當我們使用漸變物件，必須使用兩種或兩種以上的停止顏色：
• addColorStop(stop，color)： stop：0.0~ 1.0之間；漸變結束的位置。color：顏色值

createLinearGradient(x,y,x1,y1)、線條漸變

 
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);