canvas_2_绘制路径

最新推荐文章于 2024-07-25 09:24:40 发布

熙哥_tito

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量38

点赞数

分类专栏： canvas 文章标签：前端

本BLOG上原创文章未经本人许可，不得用于商业用途。转载请注明出处，否则保留追究法律责任的权利。

本文链接：https://blog.csdn.net/weixin_49471755/article/details/131004670

版权

canvas 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

话不多说，上代码！！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    canvas{
      border: 1px solid #000;
    }
  </style>
</head>
<!-- 

  图形的基本元素是路径
  路径是通过不同颜色和宽度或者曲线相连形成的不同形状的点的集合。

  beginPath()  新建一条路径，路径一旦创建成功，图形绘制命令被只想到路劲上生成路径

  moveTo(x, y)  把画笔移动到指定的坐标（x, y）。相当于指定路径的起始坐标

  lineTo(x, y)   增加一个新点，然后创建一条从上次指定点到目标点的线。
  
  closePath()    闭合路径后，图形绘制命令又重新指向到上下文中

  stroke()   通过线条来绘制图形轮廓

  fill()  通过填充路径的内容区域生成实心的图形

 -->
<body>
  <canvas id="can1" width="500" height="300"></canvas>
  <script>
    (()=> {
      let canvas = document.getElementById("can1")
      if (!canvas.getContext) return;
      let ctx = canvas.getContext("2d")
      ctx.beginPath()
      ctx.moveTo(30,30)          // 起始点
      ctx.lineTo(100,30)         // 路径点
      ctx.lineTo(100,90)
      ctx.lineTo(30,90)
      ctx.closePath()           // 闭合起始与末尾
      ctx.stroke()               // 线条绘制轮廓
      ctx.fill();                 //填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。
    })()
  </script>
</body>
</html>