canvas的使用方法

了解canvas：canvas標簽是用作圖形繪制，但是通過js腳本來實現的，canvas標簽其實只是一個容器

，最終實現繪制功能肯定是通過js腳本實現。

首先肯定要定義一個canvas標簽當做容器

<canvas id="myCanvas" width="200" height="100"></canvas>

canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成，所以需要獲取畫布對象，繪制的方法和屬性就在創建的ctx對象的方法和屬性上：

var c=document.getElementById("myCanvas");

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

ctx屬性和方法：

1：fillstyle屬性 : CSS顏色，漸變，或圖案。fillStyle 默認設置是#000000（黑色）

ctx.fillStyle="#FF0000";

2：fillsReact方法：方法定義了矩形當前的填充方式。 x,y 起點的坐標   width height 繪制的寬高

ctx.fillRect(0,0,150,75);

3：

在Canvas上畫線，我們將使用以下兩種方法：

moveTo(x,y) 定義線條開始坐標
lineTo(x,y) 定義線條結束坐標
閉合即可，上一個終點可以是下一個起點，這樣可以用線繪制圖形

stroke() 方法閉合即可 .

4:canvas 繪制文本

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

var c=document.getElementById("myCanvas");

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

ctx.font="30px Arial";

ctx.fillText("Hello World",10,50);

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

var c=document.getElementById("myCanvas");

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

var img=document.getElementById("scream");

ctx.drawImage(img,10,10);