从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>
  1. 在HTML中的body标签内编写一个canvas标签
  2. 在script标签中通过document.getElementById获取到canvas标签
  3. 通过canvas.getContext('2d')获取canvas画笔
  4. 调用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中,其中需要注意的是:

  1. ctx.moveTo(x,y) 用来指定所绘制的直线的起点
  2. ctx.lineTo(x,y) 用来指定直线的起点以及终点
  3. 调用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进行简单图形的绘制。下一期将介绍如何修改样式

相关推荐
灰海几秒前
封装WebSocket
前端·网络·websocket·网络协议·vue
前端小巷子11 分钟前
深入理解TCP协议
前端·javascript·面试
万少12 分钟前
鸿蒙外包的十大生存法则
前端·后端·面试
江号软件分享1 小时前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子7 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子8 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则9 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js