canvas画一个笑脸和画一个三角形

画一个笑脸主要用到的是画弧形的方法：arc，有五个参数：起始坐标，半径，弧形起始坐标，还有一个参数是顺时针还是逆时针。画的笑脸：虽然丑了点，但是学习了

代码：


html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Documenttitle>
    head>
    <body>
        <canvas id="myCanvas" width="500" height="500">canvas>
        <script>
            const canvas = document.getElementById('myCanvas')
            if (canvas.getContext) {
                const ctx = canvas.getContext('2d')
                // ctx.fillStyle = 'red'
                // 画一个圆形（圆心坐标，半径，起始弧度，结束弧度, 顺时针还是逆时针：true/false）
                ctx.beginPath()
                ctx.arc(150, 150, 100, 0, Math.PI * 2)
                // 画完之后，得填充一下,不然看不到
                // ctx.fill()
                // 只画路径
                ctx.stroke()
                // ctx.closePath()
 
                // 画笑脸的嘴角:可以使用移动画笔的操作:moveTo(x,y) 移动到指定位置
                // ctx.beginPath()
                // 移动到开始落画笔的地方，不然会带上半径一起画出来
                ctx.moveTo(200, 150)
                ctx.arc(150, 150, 50, 0, Math.PI)
                ctx.stroke()
                // ctx.closePath()
 
                // 画眼睛
                // ctx.beginPath()
                ctx.moveTo(120, 100)
                ctx.arc(100, 100, 20, 0, Math.PI * 2)
                // ctx.fill()
                ctx.stroke()
                // ctx.closePath()
                // 画眼睛
                // ctx.beginPath()
                ctx.moveTo(220, 100)
                ctx.arc(200, 100, 20, 0, Math.PI * 2)
                // ctx.fill()
                ctx.stroke()
                ctx.closePath()
            }
        script>
    body>
html>

还有画一个三角形：主要用的是画线的方法：lineTo，有两个参数，起始坐标。记得画之前，先将画笔的坐标移动到某个位置

代码：


html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Documenttitle>
    head>
    <body>
        <div>画一条直线div>
        <canvas id="myCanvas" width="500" height="500">canvas>
        <script>
            // 获取画布
            var canvas = document.getElementById('myCanvas')
 
            // 获取画笔
            var context = canvas.getContext('2d')
            // 画线的时候要有起点和终点
            context.moveTo(0, 0)
            // 终点: 100, 0
            context.lineTo(100, 0)
            context.lineTo(50, 100)
            context.lineTo(0, 0)
            // 画线
            context.stroke()
            context.fill()
        script>
    body>
html>

相关阅读:
BUG系列路径规划算法原理介绍（一）——总结篇
【华为OD机试python】数据分类【2023 B卷|100分】
2022年9月8号Java23设计模式(课时七)桥接模式
【精讲】vue框架利用脚手架实现购物车（含添加、删除、存储、清空数据、全选or单选、tap栏切换）内含详细注释
【C++专栏】手撕数据结构与算法
2024HVV行动-进军蓝中研判（log4j2、fastjson、Struts2、Shiro）
GFS分布式文件系统&实验
Hbuilder打包成APP流程,以及遇到的坑
智能中仍存在着许多未被发现的逻辑
MarkDown详细入门笔记

原文地址：https://blog.csdn.net/weixin_44786530/article/details/133863763