使用canvas绘制笑脸

╰半夏微凉° 2022-12-13 14:27 123阅读 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

发表评论取消回复

表情：

评论列表（有 0 条评论，123人围观）

还没有评论，来说两句吧...

相关阅读

相关使用canvas绘制笑脸

笑脸示例代码： <template> <div class="div"> <canvas id="tutorial3" width="15

╰半夏微凉°/ 2022年12月13日 14:27/ 0 赞/ 124 阅读

相关使用canvas绘制一个三角形

绘制一个三角形的例子： <template> <div class> <canvas id="tutorial2" width="15

￡神魔★判官ぃ/ 2022年12月13日 14:26/ 0 赞/ 199 阅读

相关 html canvas 绘制倒影,canvas

JavaScript let t = 0; const colors = \["\161616", "\cf894c", "\c74962"\]; const canva

系统管理员/ 2022年10月10日 06:24/ 0 赞/ 261 阅读

相关 canvas绘制七巧板

首先推荐的课程学习是《[炫丽的倒计时效果Canvas绘图与动画基础][Canvas]》，感谢liuyubobobo的讲解。偶然之间发现了这门canvas的课程，本来一直都在

落日映苍穹つ/ 2022年08月12日 01:17/ 0 赞/ 232 阅读

相关【Html5每日练习】canvas笑脸

在某个论坛游荡的时候，看到一个笑脸图样，就用canvas写了一个，代码如下 <html lang="en-US"> <canvas id=myCan

￡神魔★判官ぃ/ 2022年06月13日 11:29/ 0 赞/ 296 阅读

相关 Canvas绘制曲线

文章目录圆弧贝塞尔曲线圆弧圆弧使用`arc`方法绘制，画圆的时候画的弧度是从0到2π，而想要画圆弧就调整参数只画出部分圆即可。 co

深碍√TFBOYSˉ_/ 2021年12月14日 13:49/ 0 赞/ 637 阅读

相关 canvas 绘制虚线

一.分析原理是：求出AB点之间的长度，再设置虚线的长度dashLength，把AB是我长度/虚线长度dashLength 就是虚线数量，根据虚线数量，长度就可以得到当第i个

阳光穿透心脏的1/2处/ 2021年09月12日 01:36/ 0 赞/ 519 阅读

相关 canvas绘制矩形

canvas提供了三个API，分别是： 1.绘制一个填充的矩形 fillRect(x, y, width, height) 2.绘制一个矩形的边框

旧城等待，/ 2021年07月24日 21:51/ 0 赞/ 486 阅读

相关 canvas绘制直线

说明： lineTo(x, y) 绘制一条从当前位置到指定x以及y位置的直线。 moveTo(x, y) 将笔移动到指定的坐标x以及y上。 s

迈不过友情╰/ 2021年07月24日 16:57/ 0 赞/ 526 阅读

相关 canvas 图片绘制、视频绘制

canvas 1.canvas中绘制图片: img对象.onload=function(){ bi.drawImage

た入场券/ 2021年07月24日 11:36/ 0 赞/ 549 阅读