canvas 案例实现

canvas

1. 是 HTML5 新增的元素，可用于通过使用 JavaScript 中的脚本来绘制图形。例如，它可以用于绘制图形，制作照片，创建动画，甚至可以进行实时视频处理或渲染。
2.Canvas 能干什么
图表
小游戏
活动页
特效
背景等
3.方法 描述
fill() 填充路径
stroke() 描边
arc() 创建圆弧
rect() 创建矩形
fillRect() 绘制矩形路径区域
strokeRect() 绘制矩形路径描边
clearRect() 在给定的矩形内清除指定的像素
arcTo() 创建两切线之间的弧/曲线
beginPath() 起始一条路径，或重置当前路径
moveTo() 把路径移动到画布中的指定点，不创建线条
lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条
closePath() 创建从当前点回到起始点的路径
clip() 从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo() 创建二次方贝塞尔曲线
bezierCurveTo() 创建三次方贝塞尔曲线
isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false

案例： 页面上或一条线

  methods: {
    canvas() {
      //1. 获取节点
      var myCanvas = document.getElementById("demo");
      //2.获取绘图工具箱-->即创建画笔
      var ctx = myCanvas.getContext("2d");
      //3.把画笔移动到起点
      ctx.moveTo(10, 10);
      //4.绘制直线-->画笔的终点
      ctx.lineTo(300, 300);
      //5.描边
      ctx.stroke();
     // 6 关闭当前的绘制路径
          cxt.closePath();
    },
  },
};

项目使用：

效果
5列选项，每列限选一个。

<template>
  <div class="custom-tree-container">
    <div class="marginBottom">
      <el-card>
        <div class="queryConditions">
          <div
            class="item"
            v-for="(item, index) in queryConditionsList"
            :key="item.code"
          >
            <div class="left-content">
              <div class="head-top">{{ item.name }}</div>
              <div class="content-bottom">
                <div
                  v-for="(item2, index2) in item.list"
                  :key="index2"
                  class="item"
                  @click="queryConditionsItemClick(index, index2)"
                >
                  {{ item2.name }}
                </div>
              </div>
            </div>
            <canvas
              style="width: 40px; height: 100%"
              :id="'canvas' + index"
              :key="'canvas' + index"
            ></canvas>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
let id = 1000;

export default {
  data() {
    return {
      activeName: "asphalt",
      queryConditionsList: [
        {
          name: "技术等级",
          code: "technicalGrade",
          list: [
            {
              name: "高速、一级公路",
              code: "11",
            },
            {
              name: "二、三四级公路",
              code: "12",
            },
          ],
        },
        {
          name: "交通量",
          code: "traffic",
          list: [
            {
              name: "重>=8000",
              code: "11",
            },
            {
              name: "中8000→3000",
              code: "12",
            },
            {
              name: "轻<3000",
              code: "13",
            },
          ],
        },
        {
          name: "PCI",
          code: "PCI",
          list: [
            {
              name: "优良>=90",
              code: "11",
            },
            {
              name: "中90→80",
              code: "12",
            },
            {
              name: "次差<80",
              code: "13",
            },
          ],
        },
        {
          name: "RQI",
          code: "RQI",
          list: [
            {
              name: "优良>=90",
              code: "11",
            },
            {
              name: "中90→80",
              code: "12",
            },
            {
              name: "次差<80",
              code: "13",
            },
          ],
        },
        {
          name: "PSSI",
          code: "PSSI",
          list: [
            {
              name: "高>=70",
              code: "11",
            },
            {
              name: "低<70",
              code: "12",
            },
          ],
        },
      ],
      queryConditions: [],
    };
  },

  methods: {
    queryConditionsItemClick(index, index2) {
      this.$set(this.queryConditions, index, index2);
      this.setQueryConditionsCanvas(index, index2);
    },
    setQueryConditionsCanvas(index, index2) {
      this.queryConditions.forEach((item, j) => {
        if (item != undefined) {
          var c = document.getElementById("canvas" + j);
          var cxt = c.getContext("2d");
          c.width = c.width;
          cxt.strokeStyle = "red";
          cxt.lineCap = "round";
          //注意，Canvas的坐标系是：Canvas画布的左上角为原点(0,0)，向右为横坐标，向下为纵坐标，单位是像素(px)。
          //开始一个新的绘制路径
          cxt.beginPath();
          //定义直线的起点坐标为(10,10)
          cxt.moveTo(0, 55 + item * 40);
          //定义直线的终点坐标为(50,10)
          cxt.lineTo(300, 55 + this.queryConditions[j + 1] * 40);
          //沿着坐标点顺序的路径绘制直线
          cxt.stroke();
          //关闭当前的绘制路径
          cxt.closePath();
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.queryConditions {
  display: flex;
  & > .item {
    width: 11.5%;
    display: flex;
    .left-content {
      flex: 1;
      .head-top {
        text-align: center;
        padding: 20px 0;
        color: #999;
        font-size: 20px;
      }
      .content-bottom {
        .item {
          border: 1px solid #903939;
          height: 50px;
          line-height: 50px;
          border-radius: 8px;
          text-align: center;
          margin-top: 15px;
          font-size: 15px;
          cursor: pointer;
          &:first-child {
            margin-top: 0;
          }
          &.active {
            color: red;
          }
        }
      }
    }
  }
}
</style>