什么是Canvas？

HTML5 的 Canvas 元素使用 JavaScript 在網(wǎng)頁上繪制圖像。

畫布是一個矩形區(qū)域，你可以控制其每一像素。

canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

創(chuàng)建 Canvas 元素

向 HTML5 頁面添加 Canvas 元素。

規(guī)定元素的 id、寬度和高度：

通過 JavaScript 來繪制

Canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內(nèi)部完成：

• 首先，JavaScript 使用 id 來尋找 Canvas 元素：

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

• 其次，創(chuàng)建 context 對象：

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

• 然后，getContext("2d") 對象是內(nèi)建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。下面的兩行代碼繪制一個紅色的矩形：

cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);

• 最后，使用fillStyle 方法，可將其染成紅色，fillRect 方法規(guī)定了形狀、位置和尺寸。

繪圖方法：

• 線條以及填充
• moveTo（）方法使用X和Y作為參數(shù)，在 Canvas 上設(shè)置參數(shù)指定的線條起始點(diǎn)。
• lineTo（）方法使用X和Y作為參數(shù)，在 Canvas 上創(chuàng)建上一個點(diǎn)到參數(shù)指定點(diǎn)的路徑。
• stroke（）方法繪制出了 Canvas 上，moveTo（）指定的點(diǎn)到 lineTo（）指定點(diǎn)的路徑線條。stroke（）方法沒有參數(shù)。
• beginPath（）方法用于開始一個新路徑或重置當(dāng)前路徑，沒有參數(shù)。
• closePath（）方法用于創(chuàng)建從起始點(diǎn)到終點(diǎn)的路徑，有效的閉合并形成路徑的形狀，沒有參數(shù)。
• fill（）方法用于為當(dāng)前的路徑填充樣式。

JavaScript 代碼：

<script type="text/javascript">

var canvas = document.getElementById("mycanvas");

var context = canvas.getContext("2d");

context.moveTo(250,50);

context.lineTo(150,100);

context.lineTo(250,150);

context.closePath();

context.stroke();

context.fill();

• 文本

HTML5 提供了3個屬性 font、textAlign 和 textBaseline，用于定義 Canvas 上文本的不同狀態(tài)。

• font 屬性設(shè)置或獲取字體屬性，如字體樣式、字重、字體大小和字體系列等。它遵循和 CSS 字體屬性相同的語法。
• textAlign 屬性設(shè)置或獲取文本內(nèi)容的水平對齊方式。textAlign 可以設(shè)置成5個值："start",  "end",  "right",  "left" 和 "center"
• textBaseline 屬性設(shè)置或獲取文本內(nèi)容的垂直對齊方式。textBaseline 可以設(shè)置成5個值："top",  "bottom",  "middle",  "aplhabetic" 和 "hanging"。

• 漸變
• strokeStyle 屬性設(shè)置或獲取 Canvas 上用于繪制路徑的顏色、漸變和圖案。
• createLinearGradient（）方法通過將對象以值的形式分配給 strokeStyle 或者相關(guān)圖形的填充屬性，用于創(chuàng)建填充舉行，圓形，線條和文本的漸變對象。

createLinearGradient有4個參數(shù)：起點(diǎn)的X坐標(biāo)

• 起點(diǎn)的X坐標(biāo)
• 起點(diǎn)的Y坐標(biāo)
• 終點(diǎn)的X坐標(biāo)
• 終點(diǎn)的Y坐標(biāo)
• 
  
• createLinearGradient（）方法必須與 addColorStop（）方法一起使用，來指定漸變對象中的不同顏色和相對的位置。
• addColorStop（）方法指定了漸變對象的顏色和位置。
• addColorStop（）有2個參數(shù)：
• 一個0.0到1.0之間的值，代表漸變中開始點(diǎn)和結(jié)束點(diǎn)的位置。
• 該點(diǎn)位置的顏色
• 
  

• JavaScript 代碼：

<script type="text/javascript">
var canvas=document.getElementById('mycanvas');
var context=canvas.getContext('2d');
var gradient=context.createLinearGradient(50,30,50,170);
gradient.addColorStop(0,"red");
gradient.addColorStop("0.1","orange");
gradient.addColorStop("0.3","yellow");
gradient.addColorStop("0.5","green");
gradient.addColorStop("0.7","blue");
gradient.addColorStop("0.9","indigo");
gradient.addColorStop(1,"violet");
context.fillStyle=gradient;
context.fillRect(50,30,250,140);
</script>

• 圖片
• DrawImage（）方法用于繪制輸入的圖像，視頻等到 Canvas 上。

DrawImage（）方法有4個參數(shù)：

• 放置圖像的X坐標(biāo)
• 放置圖像的Y坐標(biāo)
• 圖像的寬度
• 圖像的高度
• 
  
• getImageData（）方法通過從 Canvas 上指定的矩形里拷貝像素數(shù)據(jù)，來創(chuàng)建一個圖形數(shù)據(jù)對象。

getImageData（）方法有4個參數(shù)：

• 復(fù)制的矩形左上角X坐標(biāo)
• 復(fù)制的矩形左上角Y坐標(biāo)
• 復(fù)制矩形的寬度
• 復(fù)制矩形的高度
• 
  
• putImageData（）方法用于將指定圖像的像素數(shù)據(jù)放回到 Canvas 上來。

putImageData（）方法有7個參數(shù)：

• ImageData 對象
• ImageData 對象左上角的x坐標(biāo)
• ImageData 對象左上角的Y坐標(biāo)
• 放置圖像的X坐標(biāo)
• 放置圖像的Y坐標(biāo)
• 繪制圖像的寬度
• 繪制圖像的高度