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