<canvas>標(biāo)簽定義圖形，比如圖表和其他圖像，你必須用腳本來(lái)繪制圖形。

在畫布上（ Canvas ）畫一個(gè)共紅色矩形，漸變矩形，彩色矩形，和一些彩色文字。

什么是 Canvas？

HTML5<canvas>元素用于圖形繪制，通過(guò)腳本（通常是 Javascript）來(lái)完成。

<canvas>標(biāo)簽是圖形容器，必須使用腳來(lái)繪制圖形。

你可以通過(guò)很多方法使用canvas來(lái)繪制路徑，盒，圓、字符以及圖像。

創(chuàng)建一個(gè)畫布（ Canvas ）

一個(gè)畫布在網(wǎng)頁(yè)中是一個(gè)矩形框通過(guò) <canvas> 元素來(lái)繪制。

注意：默認(rèn)情況下<canvas>元素沒(méi)有邊框內(nèi)容

<canvas簡(jiǎn)單實(shí)例如下：

<canvas id="mycanva" width="200px" height="200px"></canvas>

注意：標(biāo)簽通常需要一個(gè)指定 id 屬性（ 腳本中經(jīng)常引用 ），width 和 height屬性定義的畫布的大小，也可以使用 style屬性添加邊框。

使用 Javascript 來(lái)繪制圖像

canvas 元素本身是沒(méi)繪圖能力。所有的繪制工作必須在 Javascript 內(nèi)完成

var canvas = documnet.getElementById（"mycancas"）var ctx = canvas.getContext('2d')ctx.fillStyle = '#000000'// fillStyle ：屬性是填充 CSS背景 漸變  默認(rèn)是："#000000"ctx.fillRect(0,0,150，75) /*
參數(shù)1：x坐標(biāo)
參數(shù)2：y坐標(biāo)
參數(shù)3：寬
參數(shù)4：高
*/

canvas坐標(biāo)

canvas是一個(gè)二維網(wǎng)格

canvas的左上角坐標(biāo)為（0，0）

上面的 fillRect 方法擁有參數(shù)（0，0，，150，75）

意思是：在畫布上繪制 150*75的圖形，從左上角（0，0）開始

坐標(biāo)實(shí)例

如下圖所示，畫布的 X 和 Y 坐標(biāo)用于在畫布上對(duì)繪畫進(jìn)行定位。鼠標(biāo)移動(dòng)的矩形框上，顯示定位坐標(biāo)。

?Canvas - 路徑

在 canvas 上畫線，我們可以使用這兩種方法：

moveTo（x，y）定義線條開始坐標(biāo)

lineTo（x，y）定義線條結(jié)束坐標(biāo)

strock（）繪制線條的方法

var canvvas = document.getElementById('mycanvas')var ctx = canvas.getContext('2d')//繪制坐標(biāo)的起始位置  參數(shù)一：x軸  參數(shù)二：y軸ctx.moveTo(0,0)//繪制坐標(biāo)的結(jié)束位置  參數(shù)一：x軸  參數(shù)二：y軸ctx.lineTo(200,100)//開始繪制圖表ctx.stroke()

在 canvas 中繪制圖形，我可以將方法以下方法：

arc(x,y,r,start,stop)

實(shí)際上我們可以 strke() 或者 fill()

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

var canvas = documnet.getElementById('mycanvas')var ctx = canvas.getContext('2d')// 使用 beginPath() 開始繪畫ctx.beginPath()// 使用 arc() 開始繪制ctx.arc(150,40,20,0,2*Math*PI)/*
參數(shù)一：x軸的位置
參數(shù)二：y軸的位置
參數(shù)三：半徑的位置
參數(shù)四：圓的起始位置
參數(shù)五：圓的結(jié)束位置
*/// 結(jié)束繪畫ctx.stroke()

?Canvas - 文本

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

font - 定義字體

filltext( text,x,y )：在 canvas 上繪制實(shí)心的文本

sreokeText( text,x,y?)：在 canvas 上繪制空心的文本

// 繪制實(shí)心的文本var canvas = document.getElementById('mycanvas')var ctx = canvas.getContext('2d')// 字體大小為 30 pxctx.font = '30px Arial'ctx.fillText(' Eoklee ',15,50)/*
fillText（）
參數(shù)一：添加文字的內(nèi)容
參數(shù)二：x軸的位置
參數(shù)三：y軸的位置
*/// 繪制空心的文本var canvas = document.getElementById('mycanvas')var ctx = canvas.getContext('2d')// 字體大小為 30 pxctx.font = '30px Arial'ctx.strokeText(' Eoklee ',15,50)/*
strokeText（）
參數(shù)一：添加文字的內(nèi)容
參數(shù)二：x軸的位置
參數(shù)三：y軸的位置
*/-