2021-03-24 canvas
canvas画布什么是canvas
可以绘制及显示内容的区域范围
canvas的应用面
1.美图工具
2.美化拍照或者视频画面
3.做游戏
现成游戏引擎
白鹭引擎
cocoa-x
cocoa-creater
unity3d
微信小游戏
4.动画
教学
医学
建筑
5.数据可视化
现成的数据可视化框架
three
echats
基本使用
显示可以绘制及内容的标签canvas
类似视频标签可以通过width、height的属性来设置自己的宽高
默认的宽高
width300
height150
可以通过CSS设置宽高但是不要这么去使用？
找同学解答
会把整个画布按照增加像素的比例整体拉伸放大或者缩小
绘制的api
目标
绘制一条线
人（context）
//2.获取上下文对象（获取画画的人）
letcontext=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();
}
页:
[1]