Canvas
功能
在網(wǎng)頁(yè)中實(shí)時(shí)生成圖像饥伊，并操作圖像內(nèi)容（通俗就是在網(wǎng)頁(yè)中畫畫）
- canvas畫布可以制作在線繪圖工具,
- canvas畫布可以制作動(dòng)態(tài)數(shù)據(jù)圖紙.常用于網(wǎng)站后臺(tái)的數(shù)據(jù)統(tǒng)計(jì)功能.
- canvas畫布可以用于制作HTML5游戲
- canvas畫布可以制作app應(yīng)用.....
格式
<canvas id=“myCanvas” width=“500” height=“300”></canvas>
注意:
1.IE9+瀏覽器支持
2.默認(rèn)300寬度事甜，150高度
3.不要使用css給canvas設(shè)置寬度和高度－導(dǎo)致繪制的圖形被縮放
使用:
1.獲取Canvas對(duì)象（即畫布）
var obj = document.querySelector('canvas');
obj.width:畫布寬度
obj.height:畫布高度
2.獲取繪圖環(huán)境:所有的繪圖都以此為基礎(chǔ)
var ctx = obj.getContext('2d');
Canvas繪圖圖形
直線
方法:
moveTo(x,y):將鼠標(biāo)移動(dòng)到指定的點(diǎn)
lineTo(x,y):將畫筆移動(dòng)到指定x,y點(diǎn)，形成一條直線
stroke():將點(diǎn)繪制成直線
屬性:
lineWidth:直線的厚度
strokeStyle:直線(邊框)的顏色
lineCap:直線頭尾的樣式（不占據(jù)原來(lái)直線的長(zhǎng)度）
butt:默認(rèn)
round:圓形
square:方形（多出寬度一半的值）
lineJoin:兩條直線的夾角的樣式
miter:默認(rèn)尖角
round:圓形
bevel:斜角
虛線
moveTo(100,100)
lineTo(400,100)
setLineDash([5,10]) 5:線段的長(zhǎng)度 10:線段的間距
setLineDash([5,10,15]) 復(fù)制一份數(shù)組元素妓灌，循環(huán)繪制
setLineDash([5,10,15,20]) 奇數(shù)線段長(zhǎng)度，偶數(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é)束弧度
逆|順:順時(shí)針繪制|逆時(shí)針繪制
canvas很多都是利用弧度進(jìn)行計(jì)算的
角度和弧度計(jì)算公式：弧度 = 角度*Math.PI/180
全圓：2PI(360)
半圓：PI(180)
1/4圓：PI/2(90)
曲線
moveTo(移動(dòng)到指定位置的橫坐標(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)來(lái)掌控曲線方向
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è)置文字水平對(duì)齊方式
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)移動(dòng)到指定位置
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ù)保存之前的樣式
將這兩個(gè)方法之間的代碼獨(dú)立姨伟，里面的樣式設(shè)置不會(huì)帶外面的繪制產(chǎn)生影響
剪輯區(qū)域
clip() 用于設(shè)定剪輯的區(qū)域
注意：使用clip進(jìn)行了路徑剪輯之后所有操作只能在剪輯區(qū)域之內(nèi)進(jìn)行操作。
使用剪輯區(qū)域一般都會(huì)在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)的源圖像部分會(huì)顯示嫩痰，目標(biāo)圖像是透明的剿吻。
source-out 在目標(biāo)圖像之外顯示源圖像。只會(huì)顯示目標(biāo)圖像之外源圖像部分串纺，目標(biāo)圖像是透明的丽旅。
destination-over 在源圖像上方顯示目標(biāo)圖像。
destination-atop 在源圖像頂部顯示目標(biāo)圖像纺棺。源圖像之外的目標(biāo)圖像部分不會(huì)被顯示榄笙。
destination-in 在源圖像中顯示目標(biāo)圖像。只有源圖像內(nèi)的目標(biāo)圖像部分會(huì)被顯示五辽，源圖像是透明的办斑。
destination-out 在源圖像外顯示目標(biāo)圖像外恕。只有源圖像外的目標(biāo)圖像部分會(huì)被顯示杆逗，源圖像是透明的。
lighter 顯示源圖像 + 目標(biāo)圖像鳞疲。
copy 顯示源圖像罪郊。忽略目標(biāo)圖像。
線性漸變：指定區(qū)間的顏色過渡
var color = context.createLinearGradient(起始點(diǎn)橫坐標(biāo)尚洽，起始點(diǎn)縱坐標(biāo)悔橄，寬度，高度)
color.addColorStop(偏移值，顏色)
徑向漸變(兩個(gè)圓心的連線進(jìn)行顏色過渡癣疟，兩個(gè)圓的切線的焦點(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;
圖片對(duì)象
將圖片繪制到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)集合對(duì)象
var obj = ctx.getImageData(起始橫坐標(biāo)匠抗，起始縱坐標(biāo)，寬度污抬，高度)
obj.width:行像素個(gè)數(shù)
obj.height:列像素個(gè)數(shù)
obj.data:整體像素組的顏色組成的數(shù)組
obj.data.length:像素個(gè)數(shù)的4倍（1個(gè)像素點(diǎn)4個(gè)顏色值）
rgba()都是0-255的范圍汞贸，透明度也是
// 將圖像obj寫入到指定的canvas區(qū)間內(nèi)
putImageData(obj,起始橫坐標(biāo)，起始縱坐標(biāo))
// 創(chuàng)建圖像
createImageData(寬度印机，高度)
