从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进行简单图形的绘制。下一期将介绍如何修改样式

相关推荐
袁煦丞1 分钟前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆2 分钟前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记13 分钟前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆13 分钟前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户214118326360214 分钟前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军14 分钟前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句17 分钟前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜17 分钟前
CommonJS与ESM
前端·javascript
LaoZhangAI17 分钟前
GPT-image-1 API如何传多图:开发者完全指南
前端·后端
G等你下课19 分钟前
从点击到执行:如何优雅地控制高频事件触发频率
前端·javascript·面试