## 功能

?在網(wǎng)頁中實(shí)時生成圖像染突，并操作圖像內(nèi)容（通俗就是在網(wǎng)頁中畫畫）

1.canvas畫布可以制作在線繪圖工具,

2.canvas畫布可以制作動態(tài)數(shù)據(jù)圖紙.常用于網(wǎng)站后臺的數(shù)據(jù)統(tǒng)計功能.

3.canvas畫布可以用于制作HTML5游戲

4.canvas畫布可以制作app應(yīng)用.....

## 格式

?< canvas id=“myCanvas” width=“500” height=“300”>

注意:

1.IE9+瀏覽器支持

2.默認(rèn)300寬度纲刀，150高度

3.不要使用css給canvas設(shè)置寬度和高度－導(dǎo)致繪制的圖形被縮放

使用:

1.獲取Canvas對象（即畫布）

var obj = document.querySelector('canvas');

obj.width:畫布寬度

obj.height:畫布高度

2.獲取繪圖環(huán)境:所有的繪圖都以此為基礎(chǔ)

var ctx = obj.getContext('2d');

# Canvas繪圖圖形

## 直線

方法:

moveTo(x,y):將鼠標(biāo)移動到指定的點(diǎn)

lineTo(x,y):將畫筆移動到指定x,y點(diǎn)共螺，形成一條直線

stroke():將點(diǎn)繪制成直線

屬性:

lineWidth:直線的厚度

strokeStyle:直線(邊框)的顏色

lineCap:直線頭尾的樣式（不占據(jù)原來直線的長度）

butt:默認(rèn)

round:圓形

square:方形（多出寬度一半的值）

lineJoin:兩條直線的夾角的樣式

miter:默認(rèn)尖角

round:圓形

bevel:斜角

## 虛線

moveTo(100,100)

lineTo(400,100)

setLineDash([5,10])????????5:線段的長度????10:線段的間距

setLineDash([5,10,15])????????復(fù)制一份數(shù)組元素棍厌，循環(huán)繪制

setLineDash([5,10,15,20])????奇數(shù)線段長度果善，偶數(shù)線段間距

## 矩形

屬性:

fillStyle : 填充顏色

strokeStyle : 矩形邊框顏色

方法:

fillRect(x嗤堰，y冷溃，w浴骂，h) : 繪制矩形框并填充顏色

strokeRect(x乓土，y，w，h) : 繪制矩形框設(shè)置邊框的顏色

clearRect(x趣苏，y狡相，w，h) : 清空指定矩形內(nèi)容

## 圓弧(圓形)

arc(x食磕，y尽棕，radius，start彬伦，end滔悉，逆true|順false) : 繪制圓

x,y:圓心橫坐標(biāo)

radisu:圓半徑

start:開始弧度

end:結(jié)束弧度

逆|順:順時針繪制|逆時針繪制

canvas很多都是利用弧度進(jìn)行計算的

角度和弧度計算公式：弧度 = 角度*Math.PI/180

全圓：2PI(360)

半圓：PI(180)

1/4圓：PI/2(90)

## 曲線

moveTo(移動到指定位置的橫坐標(biāo)，指定位置的縱坐標(biāo))

arcTo(第一組控制點(diǎn)的橫坐標(biāo)单绑，縱坐標(biāo)回官，第二組控制點(diǎn)的橫坐標(biāo)，縱坐標(biāo)搂橙，圓弧的半徑)

二次貝塞爾曲線

quadraticCurveTo(第一組控制點(diǎn)橫坐標(biāo)歉提，第一組控制點(diǎn)縱坐標(biāo)，第二組控制點(diǎn)橫坐標(biāo)区转，第二組控制點(diǎn)縱坐標(biāo))

context.moveTo(100,200);

context.quadraticCurveTo(200,100,400,300);

三次貝塞爾曲線

bezierCurveTo(第一組控制點(diǎn)橫坐標(biāo)苔巨，縱坐標(biāo)，第二組控制點(diǎn)橫坐標(biāo)废离，縱坐標(biāo)侄泽，第三組控制點(diǎn)橫坐標(biāo)，縱坐標(biāo)):三組控制點(diǎn)來掌控曲線方向

context.moveTo(100,200);

context.bezierCurveTo(150,150,300,300,400,100);

## 文本

方法

fillText(text, x, y, [maxWidth]):填充方式繪制文本

strokeText(text, x, y, [maxWidth]):繪制文字邊框顏色

文本屬性

font屬性：跟CSS一樣

textAlign屬性：設(shè)置文字水平對齊方式

start(默認(rèn)) end left right center

textBaseline屬性：文本垂直方式

top hanging middle alphabetic(默認(rèn)) ideographic bottom

懸掛?????????????字母排序????思想的

measureText():獲取文本的寬度

## Canvas全局方法

beginPath()：開啟路徑

closePath()：關(guān)閉路徑

Canvas坐標(biāo)系統(tǒng)：默認(rèn)坐標(biāo)原點(diǎn)是元素的左上角位置（0蜻韭，0）

translate()：平移(橫坐標(biāo)悼尾，縱坐標(biāo))

注意：將坐標(biāo)原點(diǎn)移動到指定位置

scale(水平縮放倍數(shù)，垂直縮放倍數(shù)):縮放

rotate(弧度):旋轉(zhuǎn)的弧度

注意：如果要旋轉(zhuǎn)湘捎，默認(rèn)是以坐標(biāo)原點(diǎn)旋轉(zhuǎn)的诀豁，所以如果要旋轉(zhuǎn)，必須確認(rèn)坐標(biāo)原點(diǎn)在哪里

save()：保存之前的狀態(tài)

restore():恢復(fù)保存之前的樣式

將這兩個方法之間的代碼獨(dú)立窥妇，里面的樣式設(shè)置不會帶外面的繪制產(chǎn)生影響

剪輯區(qū)域

clip() 用于設(shè)定剪輯的區(qū)域

注意：使用clip進(jìn)行了路徑剪輯之后所有操作只能在剪輯區(qū)域之內(nèi)進(jìn)行操作舷胜。

使用剪輯區(qū)域一般都會在save和restore之間進(jìn)行操作。

toDataURL():返回當(dāng)前canvas圖像的URLdata信息

## Canvas全局屬性

屬性：

globalAlpha:設(shè)置全局的透明度

globalCompositeOperation：圖片合成：

source-over 默認(rèn)活翩。在目標(biāo)圖像上顯示源圖像烹骨。

source-atop 在目標(biāo)圖像頂部顯示源圖像。源圖像位于目標(biāo)圖像之外的部分是不可見的材泄。

source-in 在目標(biāo)圖像中顯示源圖像沮焕。只有目標(biāo)圖像內(nèi)的源圖像部分會顯示，目標(biāo)圖像是透明的拉宗。

source-out??在目標(biāo)圖像之外顯示源圖像峦树。只會顯示目標(biāo)圖像之外源圖像部分辣辫，目標(biāo)圖像是透明的。

destination-over??在源圖像上方顯示目標(biāo)圖像魁巩。

destination-atop??在源圖像頂部顯示目標(biāo)圖像急灭。源圖像之外的目標(biāo)圖像部分不會被顯示。

destination-in??在源圖像中顯示目標(biāo)圖像谷遂。只有源圖像內(nèi)的目標(biāo)圖像部分會被顯示葬馋，源圖像是透明的。

destination-out 在源圖像外顯示目標(biāo)圖像肾扰。只有源圖像外的目標(biāo)圖像部分會被顯示畴嘶，源圖像是透明的。

lighter 顯示源圖像 + 目標(biāo)圖像集晚。

copy??顯示源圖像窗悯。忽略目標(biāo)圖像。

線性漸變：指定區(qū)間的顏色過渡

var color = context.createLinearGradient(起始點(diǎn)橫坐標(biāo)甩恼，起始點(diǎn)縱坐標(biāo)蟀瞧，寬度沉颂，高度)

color.addColorStop(偏移值条摸，顏色)

徑向漸變(兩個圓心的連線進(jìn)行顏色過渡，兩個圓的切線的焦點(diǎn)處進(jìn)行顏色的擴(kuò)散)

var color = context.createRadialGradient(開始圓心橫坐標(biāo)铸屉，圓心縱坐標(biāo)钉蒲，半徑，結(jié)束圓圓心橫坐標(biāo)彻坛，結(jié)束圓圓心縱坐標(biāo)顷啼，結(jié)束圓的半徑);

color.addColorStop(偏移值，顏色)

陰影

陰影顏色

context.shadowColor = 'red';

陰影偏移值

context.shadowOffsetX = 20;

context.shadowOffsetY = 20;

設(shè)置模糊值

context.shadowBlur = 4;

## 圖片對象

將圖片繪制到canvas畫布中

drawImage(obj,起始橫坐標(biāo)昌屉，縱坐標(biāo)钙蒙，[固定寬度]，[固定高度]);

創(chuàng)建圖片并設(shè)置圖片是否重復(fù)

var bg = createPattern(obj,'repeat|repeat-x|repeat-y|no-repeat'):指定的方向內(nèi)重復(fù)指定的元素

ctx.fillStyle = bg;

像素操作

// 獲取canvas畫布 指定區(qū)間位置 的 像素點(diǎn)集合對象

var obj = ctx.getImageData(起始橫坐標(biāo)间驮，起始縱坐標(biāo)躬厌，寬度，高度)

obj.width:行像素個數(shù)

obj.height:列像素個數(shù)

obj.data:整體像素組的顏色組成的數(shù)組

obj.data.length:像素個數(shù)的4倍（1個像素點(diǎn)4個顏色值）

rgba()都是0-255的范圍竞帽，透明度也是

// 將圖像obj寫入到指定的canvas區(qū)間內(nèi)

putImageData(obj,起始橫坐標(biāo)扛施，起始縱坐標(biāo))

// 創(chuàng)建圖像

createImageData(寬度，高度)