从0开始学canvas

什么是canvas？

canvas是HTML5中一个非常重要的元素，它提供了一些方法让我们可以在页面上去进行绘画、制作动画效果以及交互效果，更高级的可以用来实现游戏效果、对图片进行处理。万丈高楼平地起，在实现炫酷的效果之前，让我们先来看如何利用canvas去绘制一些简单的图形。

如何创建一个canvas

创建canvas有两种方式，先来看看第一种方式是如何创建的

方式一：通过js获取canvas标签

js 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
  </head>

  <body>
    <canvas id="canvas" width="600" height="600"></canvas>
    
    <script>
    
      const canvas = document.getElementById('canvas')

      const context = canvas.getContext('2d')

      context.fillRect(100, 100, 300, 300) //fillRect(pointX,pointY,width,height)

    </script>

  </body>

</html>

在HTML中的body标签内编写一个canvas标签
在script标签中通过document.getElementById获取到canvas标签
通过canvas.getContext('2d')获取canvas画笔
调用fillRect()方法，绘制一个方形

以上代码的执行结果：

方式二：通过js创建canvas元素

js 复制代码

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta

      name="viewport"

      content="width=device-width, initial-scale=1.0"

    />

    <title>Document</title>

  </head>

  <body>

    <script>

      const canvas = document.createElement('canvas')

      canvas.width = 500

      canvas.height = 300

      document.body.appendChild(canvas)

      const context = canvas.getContext('2d')

      context.fillRect(100, 100, 250,250)

    </script>

  </body>

</html>

以上代码同样是绘制一个方形，效果如上图所示。到这里，canvas的两种创建方式就介绍完毕，接下来将使用canvas绘制一条直线

使用canvas绘制直线

在绘制直线直线，先来回顾一下如何使用js创建canvas

js 复制代码

<script>
    const canvas = document.createElement('canvas');
    canvas.width = 600;
    canvas.height = 600;
    document.body.appendChild(canvas);
    const ctx = canvas.getContent('2d');
    ctx.moveTo(100,100);
    ctx.lineTo(300,200);
    ctx.stroke()
</script>

通过以上js代码，可以创建一个canvas元素并且将canvas添加到body中，其中需要注意的是：

ctx.moveTo(x,y) 用来指定所绘制的直线的起点
ctx.lineTo(x,y) 用来指定直线的起点以及终点
调用ctx.stroke()方法，对直线进行绘制后，就可以在页面上看到，如下图：

到这里，canvas的两种创建方式以及如何绘制一个方形，如何绘制一条直线就很轻松的完成了。

使用canvas绘制折线

绘制完了一条直线后，我们再来看看如何使用canvas去绘制一条折线 1.通过js去创建canvas标签，并添加到body中 2.使用moveTo方法指定起点 3.使用lineTo方法指定直线的起终点 4.使用stroke方法，完成绘制

js 复制代码

<script>

      const canvas = document.createElement('canvas');

      canvas.width = 600;

      canvas.height = 400;

      document.body.appendChild(canvas);

      const ctx = canvas.getContext('2d');

      ctx.moveTo(100, 100);

      ctx.lineTo(200, 200);

      ctx.lineTo(300, 120);

      ctx.lineTo(400, 200);

      ctx.lineTo(500, 100);

      ctx.stroke();

    </script>

执行以上代码，你就能得到如下图的效果：

小结

看到这里，简单了解了一下canvas是什么？如何创建canvas？如何使用canvas进行简单图形的绘制。下一期将介绍如何修改样式