前端H5使用canvas画爱心以及笑脸

最新推荐文章于 2024-04-22 17:25:52 发布

瑞雨溪

最新推荐文章于 2024-04-22 17:25:52 发布

阅读量1.8k

点赞数 2

分类专栏： HTML基础文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_57301042/article/details/127882435

版权

HTML基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

canvas简介

canvas是HTML5中推出的新功能，可以在页面上生成一个画布，使用js可以在画布上绘制一些图形。

画爱心

画爱心我们需要用到bezierCurveTo方法，可以绘制一个三次贝塞尔曲线，让我们绘制想要的曲线，下面我们看代码

<!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="500" height="500"></canvas>
  </body>
  <script>
    const canvas = document.getElementById('canvas')

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

    // 画爱心
    ctx.beginPath()
    ctx.moveTo(250, 250)
    // 右边
    ctx.bezierCurveTo(300, 150, 450, 250, 250, 450)
    ctx.moveTo(250, 450)
    // 左边
    ctx.bezierCurveTo(50, 250, 200, 150, 250, 250)
    ctx.stroke()
  </script>
</html>

效果

bezierCurveTo方法参数分别是第一个控制杆的x轴，第一个控制杆的y轴，第二个控制杆的x轴，第二个控制杆的y轴，结束位置的x轴，结束位置的y轴。

画笑脸

画笑脸我们需要用到arc方法，此方法可以绘制出一个圆弧。下面我们看代码

<!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="500" height="500"></canvas>
  </body>
  <script>
    const canvas = document.getElementById('canvas')

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

    ctx.beginPath()
    // 画圆
    ctx.arc(70, 70, 50, Math.PI * 2, 0)
    ctx.moveTo(105, 70)
    // 画嘴巴
    ctx.arc(70, 70, 35, 0, Math.PI)
    ctx.moveTo(105, 50)
    // 画右边眼睛
    ctx.arc(95, 50, 10, 0, Math.PI, true)
    ctx.moveTo(55, 50)
    // 画左边眼睛
    ctx.arc(45, 50, 10, 0, Math.PI, true)
    ctx.stroke()
    ctx.closePath()
  </script>
</html>

arc的参数分别是x轴的位置，y轴的位置，大小，圆弧开始角度，圆弧结束角度，反转绘制。

Math.PI是派，乘以2就相当于360度。

效果

结语

canvas可以使我们在页面绘制许多不一样的图形，上面我只举了两个非常简单的例子。

瑞雨溪

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端H5使用canvas画爱心以及笑脸

canvas是HTML5中推出的新功能，可以在页面上生成一个画布，使用js可以在画布上绘制一些图形。canvas可以使我们在页面绘制许多不一样的图形，上面我只举了两个非常简单的例子。
复制链接

扫一扫