Demo_使用canvas在Vue中绘制蚂蚁线(Ps中选择图形时出现的可动的虚线)

最新推荐文章于 2024-09-23 18:09:19 发布

fighting Ably!

最新推荐文章于 2024-09-23 18:09:19 发布

阅读量1k

点赞数 1

分类专栏： Demo 文章标签： vue.js js canvas

本文链接：https://blog.csdn.net/weixin_44593720/article/details/120270967

版权

1. 需求效果

需要一个蚂蚁线，周围边框可动，效果如下：
在这里插入图片描述

2. 实现代码

<template>
  <div>
    <canvas id="canvas" width="200" height="200"></canvas>
  </div>
</template>
<script>
export default {
  data() {
    return {
      offsetVal: 0,
    };
  },
  methods: {
    // 绘制蚂蚁线
    drawAntLine() {
      let canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        let ctx = canvas.getContext("2d");
        // 每次绘制之前，清除之前的矩形，模拟是虚线在移动的效果
        ctx.clearRect(0, 0, 200, 200);
        // 设置虚线宽度
        ctx.setLineDash([8, 6]); // [虚线连接长度，虚线间的距离]
        // 设置虚线移动距离
        ctx.lineDashOffset = -this.offsetVal;
        ctx.strokeRect(0, 0, 200, 200);
      }
    },
    //