什么是canvas：
可以繪制及顯示內(nèi)容的 區(qū)域范圍
canvas的應(yīng)用面
1.美圖工具
2.美化拍照或者視頻畫(huà)面
3.做游戲
現(xiàn)成游戲引擎
白鷺引擎
cocoa-x
cocoa-creater
unity3d
微信小游戲
4.動(dòng)畫(huà)
教學(xué)
醫(yī)學(xué)
建筑
5.數(shù)據(jù)可視化
現(xiàn)成的數(shù)據(jù)可視化框架
three
echats
基本使用
顯示可以繪制及內(nèi)容的 標(biāo)簽 canvas
類似視頻標(biāo)簽 可以通過(guò)width皆愉、height的屬性來(lái)設(shè)置自己的寬高
默認(rèn)的寬高
width 300
height 150
可以通過(guò)CSS設(shè)置寬高 但是不要這么去使用蚂踊？
找同學(xué)解答
會(huì)把整個(gè)畫(huà)布 按照增加像素的比例 整體拉伸放大或者縮小
繪制的api
目標(biāo)
繪制一條線
人（context）
//2.獲取上下文對(duì)象（獲取畫(huà)畫(huà)的人）
let context = canvas.getContext("2d");
兩個(gè)點(diǎn)
移動(dòng)到某個(gè)點(diǎn)
//從左上角開(kāi)始畫(huà)
context.moveTo(0,0);
畫(huà)線到某個(gè)點(diǎn)
//畫(huà)到右下角
context.lineTo(1000,300);
繪制
//畫(huà)輪廓
context.stroke();
填充 fill()
設(shè)置一個(gè)整屏的畫(huà)布
//設(shè)置畫(huà)布是整屏的寬高
canvas.width = innerWidth;
canvas.height = innerHeight;
//onresize 當(dāng)窗口尺寸發(fā)生改變的方法
onresize = ()=>{
canvas.width = innerWidth;
canvas.height = innerHeight;
}
繪制一個(gè)三角形
描輪廓
繪制實(shí)心的三角形
畫(huà)有顏色的
設(shè)置繪制輪廓的顏色（樣式）
設(shè)置填充的顏色（樣式）
設(shè)置線的粗細(xì)
context.lineWidth = 5;
畫(huà)個(gè)矩形
填充的方式
fillRect（原點(diǎn)x,原點(diǎn)y,尺寸寬度女轿，尺寸的高度）
描邊的方式
strokeRect（原點(diǎn)x,原點(diǎn)y,尺寸寬度歌粥，尺寸的高度）
畫(huà)圓形或者不完全的圓形
//注意：畫(huà)扇形的時(shí)候一定要注意 確定起始點(diǎn)
context.moveTo(400,400);
context.arc(400,400,150,Math.PI/180*135,Math.PI/180*180);
(圓心x, y), （半徑radius）, startAngle起始的弧度, endAngle結(jié)束的弧度, anticlockwise是否是反時(shí)針(默認(rèn)順時(shí)針)
兩切線之間的弧度
context.strokeStyle = "orange"
context.moveTo(50,10);
context.lineTo(300,100);
context.arcTo(550,320,200,400,150);
context.lineTo(300,500);
context.stroke();
通過(guò)貝塞爾曲線的方式 繪制有弧度的線條
// 通過(guò)貝塞爾曲線的方式 繪制有弧度的線條
context.strokeStyle = "orange"
context.moveTo(50,10);
//quadratic二次元
//（產(chǎn)生弧度的制高點(diǎn) px, cpy） （結(jié)
設(shè)置線條末端樣式lineCap
butt
線段末端以方形結(jié)束譬挚。
round
線段末端以圓形結(jié)束缠沈。
square
線段末端以方形結(jié)束攻锰，但是增加了一個(gè)寬度和線段相同揩魂，高度是線段厚度一半的矩形區(qū)域饲趋。
設(shè)定線條與線條間接合處的樣式lineJoin
round
通過(guò)填充一個(gè)額外的拐揭，圓心在相連部分末端的扇形撤蟆，繪制拐角的形狀。 圓角的半徑是線段的寬度堂污。
bevel
在相連部分的末端填充一個(gè)額外的以三角形為底的區(qū)域家肯， 每個(gè)部分都有各自獨(dú)立的矩形拐角。
miter
通過(guò)延伸相連部分的外邊緣盟猖，使其相交于一點(diǎn)讨衣，形成一個(gè)額外的菱形區(qū)域。這個(gè)設(shè)置可以通過(guò) miterLimit 屬性看到效果式镐。
繪制文字
描邊
strokeText
填充
fillText
要繪制的文字,x,y
保存canvas繪制的內(nèi)容 為圖片
1.把canvas里面的內(nèi)容轉(zhuǎn)換成URL
canvas.toDataURL("image/png") "image/jpg" "image/gif"
2.創(chuàng)建a標(biāo)簽 設(shè)置href及download 的值 為轉(zhuǎn)換好的URL
3.a.click()
如
let button = document.querySelector("button");
button.onclick = ()=>{
//保存畫(huà)布的內(nèi)容 為 圖片格式
let url = canvas.toDataURL("image/png");
let a = document.createElement("a");
a.download = url;
a.href = url;
a.click();
}
