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

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]
查看完整版本: 2021-03-24 canvas