从0开始学canvas——第一篇

816 阅读2分钟

什么是canvas?

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

如何创建一个canvas

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

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

<!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>
  1. 在HTML中的body标签内编写一个canvas标签
  2. 在script标签中通过document.getElementById获取到canvas标签
  3. 通过canvas.getContext('2d')获取canvas画笔
  4. 调用fillRect()方法,绘制一个方形

以上代码的执行结果:

fillRect.png

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

<!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

<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中,其中需要注意的是:

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

line.png

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

使用canvas绘制折线

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

<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>

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

折线.png

小结

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