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

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

    代码：

    1. html>
    2. <html lang="en">
    3.     <head>
    4.         <meta charset="UTF-8" />
    5.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.         <title>Documenttitle>
    7.     head>
    8.     <body>
    9.         <canvas id="myCanvas" width="500" height="500">canvas>
    10.         <script>
    11.             const canvas = document.getElementById('myCanvas')
    12.             if (canvas.getContext) {
    13.                 const ctx = canvas.getContext('2d')
    14.                 // ctx.fillStyle = 'red'
    15.                 // 画一个圆形（圆心坐标，半径，起始弧度，结束弧度, 顺时针还是逆时针：true/false）
    16.                 ctx.beginPath()
    17.                 ctx.arc(150, 150, 100, 0, Math.PI * 2)
    18.                 // 画完之后，得填充一下,不然看不到
    19.                 // ctx.fill()
    20.                 // 只画路径
    21.                 ctx.stroke()
    22.                 // ctx.closePath()
    23.  
    24.                 // 画笑脸的嘴角:可以使用移动画笔的操作:moveTo(x,y) 移动到指定位置
    25.                 // ctx.beginPath()
    26.                 // 移动到开始落画笔的地方，不然会带上半径一起画出来
    27.                 ctx.moveTo(200, 150)
    28.                 ctx.arc(150, 150, 50, 0, Math.PI)
    29.                 ctx.stroke()
    30.                 // ctx.closePath()
    31.  
    32.                 // 画眼睛
    33.                 // ctx.beginPath()
    34.                 ctx.moveTo(120, 100)
    35.                 ctx.arc(100, 100, 20, 0, Math.PI * 2)
    36.                 // ctx.fill()
    37.                 ctx.stroke()
    38.                 // ctx.closePath()
    39.                 // 画眼睛
    40.                 // ctx.beginPath()
    41.                 ctx.moveTo(220, 100)
    42.                 ctx.arc(200, 100, 20, 0, Math.PI * 2)
    43.                 // ctx.fill()
    44.                 ctx.stroke()
    45.                 ctx.closePath()
    46.             }
    47.         script>
    48.     body>
    49. html>

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

    代码：

    1. html>
    2. <html lang="en">
    3.     <head>
    4.         <meta charset="UTF-8" />
    5.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.         <title>Documenttitle>
    7.     head>
    8.     <body>
    9.         <div>画一条直线div>
    10.         <canvas id="myCanvas" width="500" height="500">canvas>
    11.         <script>
    12.             // 获取画布
    13.             var canvas = document.getElementById('myCanvas')
    14.  
    15.             // 获取画笔
    16.             var context = canvas.getContext('2d')
    17.             // 画线的时候要有起点和终点
    18.             context.moveTo(0, 0)
    19.             // 终点: 100, 0
    20.             context.lineTo(100, 0)
    21.             context.lineTo(50, 100)
    22.             context.lineTo(0, 0)
    23.             // 画线
    24.             context.stroke()
    25.             context.fill()
    26.         script>
    27.     body>
    28. html>

     

  • 相关阅读:
    202206 集合 面试
    Win10安装TA_Lib采坑记录
    哈希表6——四数相加
    嵌入式 ADC使用手册完整版 （188977万字）（附源码详细篇）
    OpenWRT搭建个人web站点并结合内网穿透实现公网远程访问
    程序员做自己的产品 “在线客服系统” 之：种子用户的重要性
    #{}和${}的区别
    AI与医疗保健：革命性技术如何拯救生命
    基于JAVAWEB的文具售卖网的设计与实现
    SQL注入 Less26(过滤空格和注释符，使用不带空格的报错注入)
  • 原文地址：https://blog.csdn.net/weixin_44786530/article/details/133863763