canvas 画布
什么是canvas
可以绘制及显示内容的 区域范围
canvas的应用面
1.美图工具
2.美化拍照或者视频画面
3.做游戏
现成游戏引擎
白鹭引擎
cocoa-x
cocoa-creater
unity3d
微信小游戏
4.动画
教学
医学
建筑
5.数据可视化
现成的数据可视化框架
three
echats
基本使用
显示可以绘制及内容的 标签 canvas
类似视频标签 可以通过width、height的属性来设置自己的宽高
默认的宽高
width 300
height 150
可以通过CSS设置宽高 但是不要这么去使用？
找同学解答
会把整个画布 按照增加像素的比例 整体拉伸放大或者缩小
绘制的api
目标
绘制一条线
人（context）
//2.获取上下文对象（获取画画的人）
let context = canvas.getContext("2d");
两个点
移动到某个点
//从左上角开始画
context.moveTo(0,0);
画线到某个点
//画到右下角
context.lineTo(1000,300);
绘制
//画轮廓
context.stroke();
填充 fill()
设置一个整屏的画布
//设置画布是整屏的宽高
canvas.width = innerWidth;
canvas.height = innerHeight;
//onresize 当窗口尺寸发生改变的方法
onresize = ()=>{
canvas.width = innerWidth;
canvas.height = innerHeight;
}
绘制一个三角形
描轮廓
绘制实心的三角形
画有颜色的
设置绘制轮廓的颜色（样式）
设置填充的颜色（样式）
设置线的粗细
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结束的弧度, anticlockwise是否是反时针(默认顺时针)
两切线之间的弧度
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二次元
//（产生弧度的制高点 px, cpy） （结束点 x,y）
context.quadraticCurveTo(100,200,500,10);
context.stroke();
清除绘制的内容
//整屏清除
context.clearRect(0,0,innerWidth,innerHeight);
//擦除某一小块设置指定区域即可
context.clearRect(100,10,50,50);
context.beginPath();
明确绘制路径开始的部分
可以区分出 其他路径
设置线条末端样式lineCap
butt
线段末端以方形结束。
round
线段末端以圆形结束。
square
线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
设定线条与线条间接合处的样式lineJoin
round
通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。
bevel
在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。
miter
通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 miterLimit 属性看到效果。
绘制文字
描边
strokeText
填充
fillText
要绘制的文字,x,y
保存canvas绘制的内容 为图片
1.把canvas里面的内容转换成URL
canvas.toDataURL("image/png") "image/jpg" "image/gif"
2.创建a标签 设置href及download 的值 为转换好的URL
3.a.click()
如
let button = document.querySelector("button");
button.onclick = ()=>{
//保存画布的内容 为 图片格式
let url = canvas.toDataURL("image/png");
let a = document.createElement("a");
a.download = url;
a.href = url;
a.click();
}
