使用canvas绘制笑脸

╰半夏微凉° 2022-12-13 14:27 134阅读 0赞

笑脸示例代码：

<template>
      <div class="div">
        <canvas id="tutorial3" width="150" height="150"></canvas>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {};
      },
      mounted() {
        var canvas = document.getElementById("tutorial3");
        if (canvas.getContext) {
          var ctx = canvas.getContext("2d"); // 获得上下文对象（画笔）
          ctx.beginPath();
          ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
          ctx.moveTo(110, 75);
          ctx.arc(75, 75, 35, 0, Math.PI, false); // 口(顺时针)
          ctx.moveTo(65, 65);
          ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼
          ctx.moveTo(95, 65);
          ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼
          ctx.stroke();
          // ctx2.fill() // 通过填充路径的内容区域生成实心的图形。当你调用fill()函数时，所有没有闭合的形状都会自动闭合，
          // 所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。
        }
      },
    };
    </script>
    <style lang='scss' scoped>
    </style>

效果：

![20200923135829517.png][]

### 介绍一下其中用到的函数，arc()：该方法用于绘制圆弧或者圆， ###

*  arc(x, y, radius, startAngle, endAngle, anticlocwise )  画一个以（x,y）为圆心，radius 为半径的圆（圆弧），从startAngle开始，到endAngle结束，按照anticlockwise给定的方向（默认是顺时针，为true是逆时针方向，否则顺时针）来完成。详见例子：[https://blog.csdn.net/yinge0508/article/details/108752159][https_blog.csdn.net_yinge0508_article_details_108752159]

[20200923135829517.png]: /images/20221123/1e7c523852354bdebba97389ca428b3d.png
[https_blog.csdn.net_yinge0508_article_details_108752159]: https://blog.csdn.net/yinge0508/article/details/108752159