canvas?畫布
什么是canvas
可以繪制及顯示內(nèi)容的?區(qū)域范圍
canvas的應(yīng)用面
1.美圖工具
2.美化拍照或者視頻畫面
3.做游戲
現(xiàn)成游戲引擎
白鷺引擎
cocoa-x
cocoa-creater
unity3d
微信小游戲
4.動(dòng)畫
教學(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é)解答
會(huì)把整個(gè)畫布?按照增加像素的比例??整體拉伸放大或者縮小
繪制的api
目標(biāo)
繪制一條線
人（context）
//2.獲取上下文對(duì)象（獲取畫畫的人）
let?context?=?canvas.getContext("2d");
兩個(gè)點(diǎn)
移動(dòng)到某個(gè)點(diǎn)
//從左上角開始畫
context.moveTo(0,0);
畫線到某個(gè)點(diǎn)
//畫到右下角
context.lineTo(1000,300);
繪制
//畫輪廓
context.stroke();
填充?fill()
設(shè)置一個(gè)整屏的畫布
//設(shè)置畫布是整屏的寬高
canvas.width?=?innerWidth;
canvas.height?=?innerHeight;
//onresize?當(dāng)窗口尺寸發(fā)生改變的方法
onresize?=?()=>{
canvas.width?=?innerWidth;
canvas.height?=?innerHeight;
}
繪制一個(gè)三角形
描輪廓
繪制實(shí)心的三角形
畫有顏色的
設(shè)置繪制輪廓的顏色（樣式）
設(shè)置填充的顏色（樣式）
設(shè)置線的粗細(xì)
context.lineWidth?=?5;
畫個(gè)矩形
填充的方式
fillRect（原點(diǎn)x,原點(diǎn)y,尺寸寬度澎剥，尺寸的高度）
描邊的方式
strokeRect（原點(diǎn)x,原點(diǎn)y,尺寸寬度鹃栽，尺寸的高度）
畫圓形或者不完全的圓形
//注意：畫扇形的時(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();
通過貝塞爾曲線的方式?繪制有弧度的線條
//????通過貝塞爾曲線的方式?繪制有弧度的線條
context.strokeStyle?=?"orange"
context.moveTo(50,10);
//quadratic二次元
//（產(chǎn)生弧度的制高點(diǎn)?px,?cpy）?（結(jié)束點(diǎn)?x,y）
context.quadraticCurveTo(100,200,500,10);
context.stroke();
清除繪制的內(nèi)容
//整屏清除
context.clearRect(0,0,innerWidth,innerHeight);
//擦除某一小塊設(shè)置指定區(qū)域即可
context.clearRect(100,10,50,50);
context.beginPath();
明確繪制路徑開始的部分
可以區(qū)分出?其他路徑
設(shè)置線條末端樣式lineCap
butt
線段末端以方形結(jié)束。
round
線段末端以圓形結(jié)束。
square
線段末端以方形結(jié)束，但是增加了一個(gè)寬度和線段相同，高度是線段厚度一半的矩形區(qū)域莽使。
設(shè)定線條與線條間接合處的樣式lineJoin
round
通過填充一個(gè)額外的，圓心在相連部分末端的扇形笙僚，繪制拐角的形狀芳肌。 圓角的半徑是線段的寬度。
bevel
在相連部分的末端填充一個(gè)額外的以三角形為底的區(qū)域肋层， 每個(gè)部分都有各自獨(dú)立的矩形拐角亿笤。
miter
通過延伸相連部分的外邊緣，使其相交于一點(diǎn)栋猖，形成一個(gè)額外的菱形區(qū)域净薛。這個(gè)設(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();
? ? }
