canvas学习笔记二之彩色边框

最新推荐文章于 2023-01-02 01:15:30 发布

cxy_xiaowu

最新推荐文章于 2023-01-02 01:15:30 发布

阅读量599

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/asdad22/article/details/120951660

版权

这段代码展示了如何在HTML页面中使用canvas元素和JavaScript来绘制具有不同颜色的边框。通过定义一个对象数组，每个对象包含边框的起始和结束坐标以及颜色，然后遍历数组并调用addLine函数进行绘制。该方法可以灵活地创建多彩的图形效果。

摘要由CSDN通过智能技术生成

在代码中加入下面代码片段即可获得所有canvas的代码提示

/** @type {HTMLCanvasElement} */

绘制彩色边框

<!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>绘制彩色边框</title>
  </head>
  <body>
    <canvas id="can" height="500" width="500"></canvas>
    <script>
      /** @type {HTMLCanvasElement} */
      const canvas = document.getElementById("can");
      let c = canvas.getContext("2d");
      let arr = [
        { xBegin: 100, yBegin: 100, xEnd: 100, YEnd: 200, color: "blue" },
        { xBegin: 100, yBegin: 100, xEnd: 200, YEnd: 100, color: "red" },
        { xBegin: 200, yBegin: 100, xEnd: 200, YEnd: 200, color: "yellow" },
        { xBegin: 100, yBegin: 200, xEnd: 200, YEnd: 200, color: "black" },
      ];
      arr.forEach((item) => {
        let { xBegin, yBegin, xEnd, YEnd, color } = item;
        addLine(xBegin, yBegin, xEnd, YEnd, color);
      });
      function addLine(xBegin, yBegin, xEnd, YEnd, color) {
        c.beginPath();
        c.moveTo(xBegin, yBegin);
        c.lineTo(xEnd, YEnd);
        c.strokeStyle = color;
        c.lineWidth = "5px";
        c.stroke();
        c.closePath();
      }
      //   c.beginPath();
      //   c.moveTo(100, 100);
      //   c.lineTo(100, 200);
      //   c.strokeStyle = "blue";
      //   c.lineWidth = "5px";
      //   c.stroke();
      //   c.closePath();
      //   c.beginPath();
      //   c.moveTo(100, 100);
      //   c.lineTo(200, 100);
      //   c.strokeStyle = "red";
      //   c.lineWidth = "5px";
      //   c.stroke();
      //   c.closePath();
      //   c.beginPath();
      //   c.moveTo(200, 100);
      //   c.lineTo(200, 200);
      //   c.strokeStyle = "yellow";
      //   c.lineWidth = "5px";
      //   c.stroke();
      //   c.closePath();
      //   c.beginPath();
      //   c.moveTo(100, 200);
      //   c.lineTo(200, 200);
      //   c.strokeStyle = "green";
      //   c.lineWidth = "5px";
      //   c.stroke();
      //   c.closePath();
    </script>
  </body>
</html>