使用canvas绘制笑脸

笑脸示例代码：

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

效果：

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

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