關於HTML5畫布canvas的功能

一、畫布的使用

1、首先創建一個畫布（canvas）

<canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid #000000”></canvas>

2、使用JavaScript來繪制圖像

<script>

      Var c=document.getElementByID(“myCanvas”)//得到畫布

      Var ctx=c.getContext(“2d”);//得到畫筆

      Cxt.fillStyle=”#FF0000”;//填充顏色

      Cxt.fillRect(0,0,150,75);//規定頂點

</script>

3、Canvas - 路徑

• moveTo(x,y) 定義線條開始坐標
• lineTo(x,y) 定義線條結束坐標

二、畫圖舉例

1、畫直線：

定義開始坐標(0,0), 和結束坐標 (200,100). 然后使用 stroke() 方法來繪制線條:

JavaScript:

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

 

2、畫圓

使用 arc() 方法 繪制一個圓:

JavaScript:

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

 

3、畫文本

使用 canvas 繪制文本，重要的屬性和方法如下：

• font - 定義字體
• fillText(text,x,y) - 在 canvas 上繪制實心的文本
• strokeText(text,x,y) - 在 canvas 上繪制空心的文本

（1）、使用 fillText()，使用 "Arial" 字體在畫布上繪制一個高 30px 的文字（實心）：

JavaScript:

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

 

（2）、使用 strokeText()，使用 "Arial" 字體在畫布上繪制一個高 30px 的文字（空心）：

JavaScript:

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

 

4、漸變

漸變可以填充在矩形, 圓形, 線條, 文本等等, 各種形狀可以自己定義不同的顏色。

以下有兩種不同的方式來設置Canvas漸變：

• createLinearGradient(x,y,x1,y1) - 創建線條漸變
• createRadialGradient(x,y,r,x1,y1,r1) - 創建一個徑向/圓漸變

當我們使用漸變對象，必須使用兩種或兩種以上的停止顏色。

addColorStop()方法指定顏色停止，參數使用坐標來描述，可以是0至1.

使用漸變，設置fillStyle或strokeStyle的值為 漸變，然后繪制形狀，如矩形，文本，或一條線

（1）、使用 createLinearGradient()，創建一個線性漸變。使用漸變填充矩形:

JavaScript:

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);

 

（2）、使用 createRadialGradient()，創建一個徑向/圓漸變。使用漸變填充矩形：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

 

5、Canvas - 圖像

把一幅圖像放置到畫布上, 使用以下方法:

• drawImage(image,x,y)

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");//得到id為scream的image,並定義為變量img
ctx.drawImage(img,10,10);//以畫布坐標（10，10）為開始，將圖片放置畫布上。