canvas入门基础知识（一）——2D图形

canvas是什么

< canvas > 是HTML5中的标签，它是一个容器，可以使用JS在其中绘制图形或文字，是一个可以使用脚本 (通常为JavaScript) 来绘制图形的 HTML 元素。
它可以用于绘制图表、制作图片构图或者制作简单的动画。主要聚焦于2D图形。
简单来说，标签canvas就是一个画布，比如你在代码中写了一个canvas标签，打开live server，在支持canvas的浏览器上显示的就是一个默认长300像素，宽150像素的白色画布，为了方便显示，可以加上阴影或者边框。

可以给canvas画布自定义width和height属性。但是要注意的是，设置画布的宽高只能在html标签里通过height和width属性来设置(canvas标签有且只有这两个属性)，如果在css里设置，只是将画布拉伸变形了，就好像拿放大镜看一样，会导致失真，其实它本质上的大小并没有变化。

基本步骤

1.准备好一个画布

<canvas id="canvas" height="700px" width="700px"></canvas>

2.获取画布

 <script>
    const canvas = document.getElementById("canvas");
  </script>

3.决定是画二维还是三维的画

<script>
    const cans = canvas.getContext('2d') //2D图形
</script>

坐标系

canvas 使用的是 W3C 坐标系 ，也就是遵循我们屏幕、报纸的阅读习惯，从上往下，从左往右。

绘制图形

例子

线段

moveTo(x,y)：定义画线的起始点；

lineTo(x,y)：定义画线的折点；

stroke()：通过线条来绘制图形轮廓

    cans.moveTo(200, 300);
    cans.lineTo(500, 300);
    cans.stroke();

折线

    cans.moveTo(200, 300);
    cans.lineTo(100, 300);
    cans.lineTo(100, 200);
    cans.lineTo(200, 200);
    cans.lineTo(200, 300);
    cans.lineTo(300, 300);
    cans.lineTo(300, 200);
    cans.stroke();

设置线段样式

strokeStyle = ‘颜色’：设置线的颜色；

lineWidth = 数字：设置线的宽度；

lineCap = ‘round/butt/square’：设置线帽为圆型/默认/方形；

lineJoin = ‘miter/round/bevel’：设置线段连接处为默认/圆形/平直形式；

globalAlpha = 数字：设置图案的透明度

注意：样式的设置必须写在绘制图形轮廓（stroke()）方法之前！否则会不生效！（因为stroke()方法是进行绘制，如果已经绘制了再设置线段的样式，自然会不生效）

给两条线同时设置样式

如果只是简单的画两条不同的线，分别设置样式，那么这两条线段之间会有样式覆盖效果。

beginPath()：开启一条新路径，生成之后，图形绘制命令会被指向到新路径上；
closePath()：关闭上一条路径的绘制

如果想正确设置，在每条路径开始和结束的时候加上这两个方法即可分别设置两条线的样式

   // 绘制第一条线：
    cans.beginPath();
    cans.moveTo(200, 200);
    cans.lineTo(500, 200);
    cans.strokeStyle = "skyblue";
    cans.lineWidth = 20;
    cans.lineCap = "round";
    cans.stroke();
    cans.closePath();
    // 绘制第二条线：
    cans.beginPath();
    cans.moveTo(200, 300);
    cans.lineTo(500, 300);
    cans.strokeStyle = "red";
    cans.lineWidth = 20;
    cans.lineCap = "round";
    cans.stroke();
    cans.closePath();

在画第二条线的时候只需要开启（beginPath()）新路径即可，两条线仍然可以分别设置样式，为了规范，建议写上closePath()

三角形

第四个点要和第一个点的坐标一致才能画出三角形

    cans.beginPath();
    cans.moveTo(200, 200);
    cans.lineTo(500, 200);
    cans.lineTo(500, 500);
    cans.lineTo(200, 200);
    cans.strokeStyle = "skyblue";
    cans.lineWidth = 20;
    cans.lineCap = "round";
    cans.stroke();
    cans.closePath();

在上面我们用closePath()方法，会把线段的终点和起点连接起来，看上去就更更衔接了

矩形

空心矩形

可以用以上画三角形的方法去定每个点坐标绘制矩形，也可以用下面的方法
直接使用cans上的strokeRect()方法

    cans.beginPath();
    cans.strokeRect(200, 150, 300, 300);
    cans.closePath();

strokeRect(x,y,width,height)
x,y表示起点的坐标，width和height分别表示矩形的宽和高

实心矩形

只需要将strokeRect()方法和strokeStyle()方法的"stroke"改成"fill"即可
fillStyle = ‘颜色’：选择填充色
填充颜色一定要写在生成矩形（fillRect()）之前，否则颜色不生效

    cans.beginPath();
    cans.fillStyle = "skyblue";
    cans.fillRect(200, 150, 300, 300);
    cans.closePath();

圆弧

使用arc(x, y, radius, startAngle, endAngle, anticlockwise)方法生成⚪/⌒，再使用stroke()方法绘制圆。
不写anticlockwise项的话默认为顺时针

    cans.beginPath();
    cans.arc(350, 300, 150, 0, [Math.PI / 180] * 360);
    cans.stroke();

逆时针绘制一段圆弧

    cans.beginPath();
    cans.arc(350, 300, 150, 0, [Math.PI / 180] * 300, true);
    cans.stroke();

以上是一些基础的图形绘制，之后会再深入学习其他的更多的canvas知识