• canvas基础2 -- 形状

     七巧板

    七巧板本质上就是 分别由几个直线 拼成一个个图形，再将这些图形结合起来

    1. var tangram = [
    2.       { p: [{ x: 0, y: 0 }, { x: 800, y: 0 }, { x: 400, y: 400 }], color: "#caff67" },
    3.       { p: [{ x: 0, y: 0 }, { x: 400, y: 400 }, { x: 0, y: 800 }], color: "#67beef" },
    4.       { p: [{ x: 800, y: 0 }, { x: 800, y: 400 }, { x: 600, y: 600 }, { x: 600, y: 200 }], color: "#ef3d61" },
    5.       { p: [{ x: 600, y: 200 }, { x: 600, y: 600 }, { x: 400, y: 400 }], color: "#f9f5la" },
    6.       { p: [{ x: 400, y: 400 }, { x: 600, y: 600 }, { x: 400, y: 800 }, { x: 200, y: 600 }], color: "#a594c0" },
    7.       { p: [{ x: 200, y: 600 }, { x: 400, y: 800 }, { x: 0, y: 800 }], color: "#fa8ecc" },
    8.       { p: [{ x: 800, y: 400 }, { x: 800, y: 800 }, { x: 400, y: 800 }], color: "#f6ca29" }
    9.     ]
    10.     const canvas = document.getElementById('canvas')
    11.     canvas.width = 800
    12.     canvas.height = 800
    13.     const context = canvas.getContext('2d')
    14.  
    15.     for (let i = 0; i < tangram.length; i++) {
    16.       draw(tangram[i], context)
    17.     }
    18.  
    19.     function draw(piece, cxt) {
    20.       cxt.beginPath()
    21.       cxt.moveTo(piece.p[0].x, piece.p[0].y)
    22.       for (var i = 1; i < piece.p.length; i++) {
    23.         cxt.lineTo(piece.p[i].x, piece.p[i].y)
    24.       }
    25.       cxt.closePath()
    26.  
    27.       cxt.fillStyle = piece.color
    28.       cxt.fill()
    29.  
    30.       cxt.strokeStyle = "black"
    31.       cxt.lineWidth = 3
    32.       cxt.stroke()
    33.     }

    图示：

    箭头

    1.     context.beginPath()
    2.     context.moveTo(100, 350) 
    3.     context.lineTo(500, 350) 
    4.     context.lineTo(500, 200) 
    5.     context.lineTo(700, 400)
    6.     context.lineTo(500, 600)
    7.     context.lineTo(500, 450)
    8.     context.lineTo(100, 450)
    9.     context.closePath()
    10.     
    11.     context.lineWidth = 5  
    12.     context.strokeStyle = '#058'
    13.  
    14.     context.stroke()

    图示：

    五角星

    如下图所示：五角星外面的五个顶点都在外圆上，里面的五个顶点都在内圆上

    五角星的10个顶点，外圆的每个顶点相差72度，同理，内圆的每个顶点也相差72度

    算出每个顶点的坐标

    最后用线段连接起来

    代码：

    1.     const canvas = document.getElementById('canvas')
    2.     canvas.width = 800
    3.     canvas.height = 800
    4.     const context = canvas.getContext('2d')    
    5.  
    6.     const translateX = 400  // 让圆心在X轴的中心位置
    7.     const bigRadius = 300   // 大圆半径
    8.     const smallRadius = 150 // 小圆半径
    9.     context.beginPath()
    10.     for(let i = 0; i < 5; i++) {
    11.       context.lineTo(
    12.         Math.cos((18 + i * 72) / 180 * Math.PI) * bigRadius + translateX,
    13.         -Math.sin((18 + i * 72) / 180 * Math.PI) * bigRadius + translateX
    14.       )
    15.       context.lineTo(
    16.         Math.cos((54 + i * 72) / 180 * Math.PI) * smallRadius + translateX,
    17.         -Math.sin((54 + i * 72) / 180 * Math.PI) * smallRadius + translateX
    18.       )
    19.     }
    20.     context.closePath()
    21.  
    22.     context.lineWidth = 10
    23.     context.stroke()

    图示：

     绘制弯月

    代码：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9.  
    10. <body>
    11.   <canvas id="canvas" style="border:1px solid #ccc;display:block;margin:50px auto;"></canvas>
    12.  
    13.   <script>
    14.     const canvas = document.getElementById('canvas')
    15.     canvas.width = 800
    16.     canvas.height = 800
    17.     const context = canvas.getContext('2d')
    18.  
    19.     fillMoon(context, 2, 400, 400, 300, 0)
    20.  
    21.     function fillMoon(cxt, d, x, y, R, rot, fillColor) {
    22.       cxt.save()
    23.       cxt.translate(x, y)
    24.       cxt.rotate(rot * Math.PI / 180)
    25.       cxt.scale(R, R)
    26.       pathMoon(cxt, d)
    27.       cxt.fillStyle = fillColor || '#fb5'
    28.       cxt.fill()
    29.       cxt.restore()
    30.     }
    31.  
    32.     function pathMoon(cxt, d) {
    33.       cxt.beginPath()
    34.       cxt.arc(0, 0, 1, 0.5*Math.PI, 1.5*Math.PI, true)
    35.       cxt.moveTo(0, -1)
    36.       cxt.arcTo(d, 0, 0, 1, dis(0, -1, d, 0) / d)
    37.       cxt.closePath()
    38.     }
    39.  
    40.     function dis(x1, y1, x2, y2) {
    41.       return Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2))
    42.     }
    43.  
    44.   </script>
    45. </body>
    46.  
    47. </html>

    图示：

    星空

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9.  
    10. <body>
    11.   <canvas id="canvas" style="border:1px solid #ccc;display:block;margin:50px auto;"></canvas>
    12.  
    13.   <script>
    14.     const canvas = document.getElementById('canvas')
    15.     canvas.width = 1200
    16.     canvas.height = 800
    17.     const context = canvas.getContext('2d')
    18.  
    19.     const skyStyle = context.createLinearGradient(0, 0, 0, canvas.height)
    20.     skyStyle.addColorStop(0.0, 'black')
    21.     skyStyle.addColorStop(1.0, '#035')
    22.     context.fillStyle = skyStyle
    23.     context.fillRect(0, 0, canvas.width, canvas.height)
    24.  
    25.     for (let i = 0; i < 200; i++) {
    26.       const R = Math.random() * 5 + 5
    27.       const r = R / 2.0
    28.       const x = Math.random() * canvas.width
    29.       const y = Math.random() * canvas.height * 0.65
    30.       const rot = Math.random() * 360
    31.  
    32.       drawStar(context, r, R, x, y, rot)
    33.     }
    34.  
    35.     fillMoon(context, 2, 900, 200, 100, 30)
    36.  
    37.     drawLand(context)
    38.  
    39.     function drawLand(cxt) {
    40.       cxt.save()
    41.  
    42.       cxt.beginPath()
    43.       cxt.moveTo(0, 600)
    44.       cxt.bezierCurveTo(540, 400, 660, 800, 1200, 600)
    45.       cxt.lineTo(1200, 800)
    46.       cxt.lineTo(0, 800)
    47.       cxt.closePath()
    48.  
    49.       const landStyle = cxt.createLinearGradient(0, 800, 0, 0)
    50.       landStyle.addColorStop(0.0, '#030')
    51.       landStyle.addColorStop(1.0, '#580')
    52.       cxt.fillStyle = landStyle
    53.       cxt.fill()
    54.  
    55.       cxt.restore()
    56.     }
    57.  
    58.     function fillMoon(cxt, d, x, y, R, rot, fillColor) {
    59.       cxt.save()
    60.       cxt.translate(x, y)
    61.       cxt.rotate(rot * Math.PI / 180)
    62.       cxt.scale(R, R)
    63.       pathMoon(cxt, d)
    64.       cxt.fillStyle = fillColor || '#fb5'
    65.       cxt.fill()
    66.       cxt.restore()
    67.     }
    68.  
    69.     function pathMoon(cxt, d) {
    70.       cxt.beginPath()
    71.       cxt.arc(0, 0, 1, 0.5 * Math.PI, 1.5 * Math.PI, true)
    72.       cxt.moveTo(0, -1)
    73.       //cxt.arcTo(d, 0, 0, 1, dis(0, -1, d, 0) / d)
    74.       cxt.quadraticCurveTo(1.2, 0, 0, 1)
    75.       cxt.closePath()
    76.     }
    77.  
    78.     function dis(x1, y1, x2, y2) {
    79.       return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2))
    80.     }
    81.  
    82.     function drawStar(cxt, r, R, x, y, rot) {
    83.       cxt.save()
    84.  
    85.       cxt.translate(x, y)
    86.       cxt.rotate(rot / 180 * Math.PI)
    87.       cxt.scale(R, R)
    88.  
    89.       starPath(cxt)
    90.  
    91.       cxt.fillStyle = '#fb3'
    92.       // cxt.strokeStyle = '#fd5'
    93.       // cxt.lineWidth = 3
    94.       // cxt.lineJoin = 'round'
    95.  
    96.       cxt.fill()
    97.       //cxt.stroke()
    98.  
    99.       cxt.restore()
    100.     }
    101.  
    102.     function starPath(cxt) {
    103.       cxt.beginPath()
    104.       for (let i = 0; i < 5; i++) {
    105.         cxt.lineTo(
    106.           Math.cos((18 + i * 72) / 180 * Math.PI),
    107.           -Math.sin((18 + i * 72) / 180 * Math.PI)
    108.         )
    109.         cxt.lineTo(
    110.           Math.cos((54 + i * 72) / 180 * Math.PI) * 0.5,
    111.           -Math.sin((54 + i * 72) / 180 * Math.PI) * 0.5
    112.         )
    113.       }
    114.       cxt.closePath()
    115.     }
    116.  
    117.   </script>
    118. </body>
    119.  
    120. </html>

    图示：

    圆角矩形

    本质上是4条线段和4个弧线，共8个部分组成

    代码：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9.  
    10. <body>
    11.   <canvas id="canvas" style="border:1px solid #ccc;display:block;margin:50px auto;"></canvas>
    12.  
    13.   <script>
    14.     const canvas = document.getElementById('canvas')
    15.     canvas.width = 800
    16.     canvas.height = 800
    17.     const context = canvas.getContext('2d')
    18.  
    19.     drawRoundRect(context, 100, 100, 600, 400, 20)
    20.  
    21.     function drawRoundRect(cxt, x, y, width, height, radius) {
    22.       cxt.save()
    23.       cxt.translate(x, y)
    24.       pathRoundRect(cxt, width, height, radius)
    25.       cxt.strokeStyle = 'black'
    26.       cxt.stroke()
    27.       cxt.restore()
    28.     }
    29.  
    30.     function pathRoundRect(cxt, width, height, radius) {
    31.       cxt.beginPath()
    32.       cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2)
    33.       cxt.lineTo(radius, height)
    34.  
    35.       cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI)
    36.       cxt.lineTo(0, radius)
    37.  
    38.       cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2)
    39.       cxt.lineTo(width - radius, 0)
    40.  
    41.       cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2)
    42.       cxt.closePath()
    43.     }
    44.  
    45.   </script>
    46. </body>
    47.  
    48. </html>

    图示：

    绘制2048棋盘

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9.  
    10. <body>
    11.   <canvas id="canvas" style="border:1px solid #ccc;display:block;margin:50px auto;"></canvas>
    12.  
    13.   <script>
    14.     const canvas = document.getElementById('canvas')
    15.     canvas.width = 800
    16.     canvas.height = 800
    17.     const context = canvas.getContext('2d')
    18.  
    19.     fillRoundRect(context, 150, 150, 500, 500, 10, '#bbada0')
    20.     for(let i = 0; i < 4; i++) {
    21.       for (let j = 0; j < 4; j++) {
    22.         fillRoundRect(context, 170+i*120, 170 + j * 120, 100, 100, 6, '#ccc0b3')
    23.       }
    24.     }
    25.  
    26.     function fillRoundRect(cxt, x, y, width, height, radius, fillColor) {
    27.       if (2*radius > width || 2*radius > height) {
    28.         return
    29.       }
    30.  
    31.       cxt.save()
    32.       cxt.translate(x, y)
    33.       pathRoundRect(cxt, width, height, radius)
    34.       cxt.fillStyle = fillColor || 'black'
    35.       cxt.fill()
    36.       cxt.restore()
    37.     }
    38.  
    39.     function strokeRoundRect(cxt, x, y, width, height, radius, lineWidth, strokeColor) {
    40.       if (2 * radius > width || 2 * radius > height) {
    41.         return
    42.       }
    43.  
    44.       cxt.save()
    45.       cxt.translate(x, y)
    46.       pathRoundRect(cxt, width, height, radius)
    47.       cxt.lineWidth = lineWidth || 1
    48.       cxt.strokeStyle = strokeColor || 'black'
    49.       cxt.stroke()
    50.       cxt.restore()
    51.     }
    52.  
    53.     function pathRoundRect(cxt, width, height, radius) {
    54.       cxt.beginPath()
    55.       cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2)
    56.       cxt.lineTo(radius, height)
    57.  
    58.       cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI)
    59.       cxt.lineTo(0, radius)
    60.  
    61.       cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2)
    62.       cxt.lineTo(width - radius, 0)
    63.  
    64.       cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2)
    65.       cxt.closePath()
    66.     }
    67.  
    68.   </script>
    69. </body>
    70.  
    71. </html>

    图示：

    1

  • 相关阅读:
    2024北京护眼产品展/北京眼视光展/北京叶黄素展/中国眼博会
    CentOS 7 通过 yum 安装 MariaDB（Mysql）
    线性筛求欧拉函数前n个和
    SpringBoot整合knife4j3.0.3
    低代码维格云明细视图入门教程
    计算机网络——应用层重点协议【HTTP协议】
    [附源码]计算机毕业设计基于web的羽毛球管理系统
    【华为机试真题Java】用户调度问题
    JavaScript自我学习
    chrome 相关设置
  • 原文地址：https://blog.csdn.net/m0_38066007/article/details/124899873