2021-03-24 canvas

jquave · 发表于 2021-3-24 20:06

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();

  }

		自动登录	找回密码
密码			立即注册