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);}},// 蚂蚁线开始移动march(){this.offsetVal++;if(this.offsetVal > 10){this.offsetVal = 0;}this.drawAntLine();setTimeout(()=>{this.march()},20)}},mounted() {this.march();},
};
</script>

3. API相关信息

clearRect(x,y,width,height) 清除从(x,y)点起始，宽度width，高度height的矩形信息
setLineDash([虚线长度,虚线间距离]) 设置虚线框中虚线的长度和虚线间的距离
lineDashOffset = val 虚线每次移动val
strokeRect(x,y,width,height) 从(x,y)点开始，绘制宽度width，高度height的矩形线框

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~

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

OpenCV中HSV与PS中HSB对应关系
OpenCV中HSV范围: H: 0- 180 S: 0- 255 V: 0- 255 PS中: HSB又称HSV,表示一种颜色bai模式:在HSB模式中,H(hues)表示zhi色相,S(sa ...
matlab画直线段,如果要在MATLAB中绘制上题中的直线段，要求，则对应的MATLAB语句为____________...
根据以下材料,回答题7月30目,某套利者在卖出10手堪萨斯交易所12月份小麦合约的同时买入10手芝加因故间断电气工作连续()以上者,应重新学习<安规>,经考试合格后,方能恢复工作.A.三 ...
mac中如何在PS中使用Cutterman工具快速切图
简介 cutterman是安装在PS软件中的一款智能自动切图插件,用法简单方便,很受设计者们喜欢,导出的图片格式有多种选择,而且还可以针对不同机型选择如苹果系统.安卓系统或电脑端使用. 工具/原料 P ...
SwiftUI WWDC21 新绘图和动画组件之 01 Canvas 支持即时模式绘制的视图类型
SwiftUI WWDC21 新绘图和动画组件之 01 Canvas 支持即时模式绘制的视图类型 Canvas 一种支持即时模式绘制的视图类型. struct Canvas<Symbols> ...
【linux】进程优先级、nice系统中的nice值和nice time，top中的PR和ps中的PRI
出处:https://blog.csdn.net/u010317005/article/details/80531985 linux内核目前实现了6中调度策略(即调度算法), 用于对不同类型的进程进行 ...
原生js实现canvas画布中绘制、移动、拖拽、删除矩形（如简易截图工具）
功能描述待图片上传并加载完成后,重新生成画布: 鼠标在画布区域内绘制,移动,拖拽,删除矩形(如截图工具一般): isboundary() 判断是否需要判断边界问题,默认false. 效果截图实现代 ...
html绘图环境,HTML_HTML5 在canvas中绘制文本附效果图，一、绘制文本在绘图环境中提 - phpStudy...
HTML5 在canvas中绘制文本附效果图一.绘制文本在绘图环境中提供了两种方法在canvas中绘制文本. strokeText(text,x,y) : 在(x,y)处绘制空心的文本. fill ...
矩形做成翻页的效果html5,HTML5 在canvas中绘制矩形附效果图
一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统,x坐标向右递增,y坐标向下递增. 使用绘图环境的矩形绘制函数来绘制矩形. fillRect(x,y,width,height) : 绘制 ...
HTML5 Canvas中绘制文本
绘制文本画布中不仅可以绘制图形,还可以绘制文本.绘制文本,既可以使用填充方法,也可以使用勾勒方法: fillText(text, x, y, [maxWidth]) strokeText(text, ...

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

1. 需求效果

2. 实现代码

3. API相关信息

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

最新文章

热门文章