canvas绘制流动的蚂蚁线(图文示例)

news2024/11/18 21:33:00

在这里插入图片描述

查看专栏目录

canvas示例教程100+专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重要的帮助。

文章目录

    • 示例效果图
    • 示例源代码(共100行)
    • canvas基本属性
    • canvas基础方法

如何使用canvas绘制流动的蚂蚁线呢?这里的蚂蚁线用到了设置虚线的方法setLineDash(),同时更为重要的是设定lineDashOffset。这个值的渐变,同时清除和重绘线框,给人以流动起来的视觉效果。具体的实现,请参考示例源代码。

示例效果图

在这里插入图片描述

示例源代码(共100行)

/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-01-12
*/
<template>
	<div class="djs_container">
		<div class="top">
			<h3>canvas绘制流动的蚂蚁线</h3>
			<div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div>
			<h4>
				<el-button type="primary" size="mini" @click="start()" v-if="!isStart">开始流动</el-button>
				<el-button type="primary" size="mini" @click="stop()" v-else>停止流动</el-button>
			</h4>
		</div>
		<div class="dajianshi ">
			<canvas id="dajianshi" ref="mycanvas" width="980" height="490"></canvas>
		</div>

	</div>
</template>
<script>
	export default {
		data() {
			return {
				ctx: null,
				canvas: null,
				offset:0,
				timer:null,
				isStart:false,
			}
		},
		mounted() {
			this.setCanvas()

			
		},
		methods: {						
			setCanvas() {
				this.canvas = document.getElementById('dajianshi');
				if (!this.canvas.getContext) return;
				this.ctx = this.canvas.getContext("2d");
				this.ctx.lineWidth=5;
				this.ctx.setLineDash([30,30]);
			},
			clearCanvas(){
				this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
			},
			drawRect(){
				        if(this.offset==60){
							this.offset=0;
						}
				        this.offset+=5;
				        this.ctx.lineDashOffset=this.offset;
				        this.ctx.beginPath();
				        this.ctx.rect(100,100,800,300);
						this.ctx.strokeStyle='red';
				        this.ctx.stroke();
			},
			start() {	
				this.timer = setInterval(()=>{ this.clearCanvas();this.drawRect() }, 100); 
				this.isStart=true;
			},
			stop(){
				clearInterval(this.timer)
				this.isStart=false;
			},


		}
	}
</script>

<style scoped>
	.djs_container {
		width: 1000px;
		height: 680px;
		margin: 50px auto;
		border: 1px solid orangered;
		position: relative;
	}

	.top {
		margin: 0 auto 0px;
		padding: 10px 0;
		background: orangered;
		color: #fff;
	}

	.dajianshi {
		margin: 5px auto 0;
		border: 1px solid #ccc;
		width: 980px;
		height: 490px;
		background-color: #f9f9f9;
	}
</style>


canvas基本属性

属性属性属性
canvasfillStylefilter
fontglobalAlphaglobalCompositeOperation
heightlineCaplineDashOffset
lineJoinlineWidthmiterLimit
shadowBlurshadowColorshadowOffsetX
shadowOffsetYstrokeStyletextAlign
textBaselinewidth

canvas基础方法

方法方法方法
arc()arcTo()addColorStop()
beginPath()bezierCurveTo()clearRect()
clip()close()closePath()
createImageData()createLinearGradient()createPattern()
createRadialGradient()drawFocusIfNeeded()drawImage()
ellipse()fill()fillRect()
fillText()getImageData()getLineDash()
isPointInPath()isPointInStroke()lineTo()
measureText()moveTo()putImageData()
quadraticCurveTo()rect()restore()
rotate()save()scale()
setLineDash()setTransform()stroke()
strokeRect()strokeText()transform()
translate()

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1375889.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

计算机体系结构----TLB+Cache

1.5 虚拟存储器之TLBCache专题 1.5.1 概述 在早期人们使用 DOS 或者更古老的操作系统的时候,序的规模很小,虽然那时候物理内存(Physical Memory)也很小,但这样的物理内存可以容纳下当时的程序但是随着图形界面的兴起&#xff0c;以及用户需求的不断增大&#xff0c;应用程序的…

2023年全国职业院校技能大赛软件测试赛题—单元测试卷⑨

单元测试 一、任务要求 题目1&#xff1a;根据下列流程图编写程序实现相应分析处理并显示结果。返回文字“xa*a*b的值&#xff1a;”和x的值&#xff1b;返回文字“xa-b的值&#xff1a;”和x的值&#xff1b;返回文字“xab的值&#xff1a;”和x的值。其中变量a、b均须为整型…

用通俗易懂的方式讲解大模型分布式训练并行技术:自动并行

之前的文章已经对多种并行技术进行了讲解&#xff0c;如&#xff1a;数据并行、张量并行、流水线并行以及多种并行方式组合使用的多维混合并行。 然而大模型的分布式训练是一个非常复杂的问题&#xff0c;目前的绝大多数的分布式训练系统&#xff0c;都依赖用户人工反复尝试以…

flutter 文件下载及存储路径

flutter 文件下载及存储路径 前言一、下载进度条二、文件路径二、文件上传总结 前言 日常开发中&#xff0c;经常会遇到下载文件的功能&#xff0c;往往我们在需要保存文件的路径上去调试&#xff0c;比如Android中的路径&#xff0c;有些会报错在SD卡中&#xff0c;但是有些手…

并发前置知识二:多线程不安全的本质

一、前言 这些年&#xff0c;我们的cpu、内存和i/o设备都在不断迭代&#xff0c;不断朝着更快的方向努力。但是&#xff0c;在这个快速发展的过程中&#xff0c;有一个核心矛盾一直存在&#xff0c;就是这三者的速度。 cpu是天上1天&#xff0c;内存是地上1年cpu是天上1天&am…

万字长文 详细讲述 计算机网络层

文章目录 网络层网络层的几个重要概念网络层的两个层面 网际协议 IP虚拟互连网络IP 地址IP 地址及其表示方法IP 地址与 MAC 地址地址解析协议 ARPIP 数据报的格式 IP层转发分组过程基于终点的转发最长前缀匹配 网际控制报文协议 ICMPICMP 报文的种类ICMP 的应用举例IPv6 的基本…

2023年全国职业院校技能大赛软件测试赛题—单元测试卷③

单元测试 一、任务要求 题目1&#xff1a;输入一个大写字母一个小写字母。根据输入的第一个字母和英文周几单词的第一个大写字母判断是周几&#xff0c;如果无法根据第一个大写字母判断&#xff0c;则继续根据输入的第二个小写字母进行判断&#xff0c;最终返回正确的英文周几…

【Redis】Redis面试热点

Redis 集群有哪些方案&#xff1f; 主从复制&#xff1a;解决了高并发问题 哨兵模式&#xff1a;解决了高并发&#xff0c;高可用问题 分片集群&#xff1a;解决了海量数据存储&#xff0c;高并发写的问题 主从复制 图示&#xff1a; 主从复制&#xff1a;单节点 Redis 并发…

python进行简单的app自动化测试(pywinauto)+ 截屏微信二维码

一、开始需要了解准备 1、安装 pip install pywinauto2、选择&#xff08;后面会通过工具进行判断用哪个&#xff09; 3、自动化控制进程的范围 示例 Application单进程 Desktop多进程 4、程序辅助检测工具 3中的下载连接 链接 点击放大镜拖到对应位置即可 二、简单的开始…

梦想贩卖机升级版知识付费源码,包含前后端源码,非线传,修复最新登录接口问题

梦想贩卖机升级版&#xff0c;变现宝吸收了资源变现类产品的许多优势&#xff0c;并剔除了那些无关紧要的元素&#xff0c;使得本产品在运营和变现能力方面实现了质的飞跃。多领域素材资源知识变现营销裂变独立版本。 支持&#xff1a;视频、音频、图文、文档、会员、社群、用…

yolov8n 瑞芯微RKNN和地平线Horizon芯片仿真测试部署,部署工程难度小、模型推理速度快

特别说明&#xff1a;参考官方开源的yolov8代码、瑞芯微官方文档、地平线的官方文档&#xff0c;如有侵权告知删&#xff0c;谢谢。 模型和完整仿真测试代码&#xff0c;放在github上参考链接 模型和代码。 因为之前写了几篇yolov8模型部署的博文&#xff0c;存在两个问题&…

【AI】AI和医疗大数据(3/3)

目录 六、AI和医疗大数据的结合案例——基于卷积神经网络CT图像检测 ——步骤&#xff1a; ——技术&#xff1a; ——案例&#xff1a; ——典型应用步骤详解&#xff1a; 第一步&#xff1a;数据预处理 第二步&#xff1a;训练集构建 第三步&#xff1a;预测 第四&a…

Serverless无服务

软件工程的本质复杂度和次要复杂度 本质&#xff1a;如何从抽象的问题&#xff0c;发展出具体的概念上的解决方案&#xff08;业务问题&#xff09; 次要&#xff1a;指实现它的过程&#xff08;技术手段&#xff09; 过去解决了的次要复杂度&#xff08;提升研发效率&#…

代币中的decimal精度代表了什么

精度的意义在于允许发送小数的代币。举例&#xff0c;一个CAT代币合约的精度为6。那么 你拥有1个CAT就意味着合约中的balance 1 * 10^6 , 转账 0.1CAT出去的话&#xff0c;就需要输入 0.1*10^6 10^5。 也就时在涉及代币时&#xff0c;查询到的余额、转账的代币数量 都和 代币…

用通俗易懂的方式讲解大模型分布式训练并行技术:MOE并行

前面的文章中讲述了数据并行、流水线并行、张量并行、序列并行、自动并行等多种并行技术。但现在的模型越来越大&#xff0c;训练样本越来越多&#xff0c;每个样本都需要经过模型的全部计算&#xff0c;这就导致了训练成本的平方级增长。 而当我们希望在牺牲极少的计算效率的…

使用numpy处理图片——90度旋转

在《使用numpy处理图片——镜像翻转和旋转》一文中&#xff0c;我们介绍了如何将图片旋转的方法。本文将使用更简单的方法旋转图片90度。 左旋转90度 import numpy as np import PIL.Image as Imagedata np.array(Image.open(the_starry_night.jpg))# left 90 rot90LeftWith…

电子学会C/C++编程等级考试2020年12月(二级)真题解析

C/C++编程(1~8级)全部真题・点这里 第1题:数组指定部分逆序重放 将一个数组中的前k项按逆序重新存放。例如,将数组8,6,5,4,1前3项逆序重放得到5,6,8,4,1。 时间限制:1000 内存限制:65536 输入 输入为两行: 第一行两个整数,以空格分隔,分别为数组元素的个数n(1 < n…

鸿蒙HarmonyOS兼容JS的类Web开发-开发指导

鸿蒙HarmonyOS兼容JS的类Web开发-开发指导 文章目录 鸿蒙HarmonyOS兼容JS的类Web开发-开发指导常用组件开发指导list开发指导创建list组件添加滚动条添加侧边索引栏实现列表折叠和展开场景示例 dialog开发指导创建dialog组件设置弹窗响应场景示例 form开发指导创建form组件实现…

一个完整的流程表单流转

1.写在前面 一个完整的流程表单审批&#xff08;起表单-->各环节审批-->回退-->重新审批-->完成&#xff09;&#xff0c;前端由Vue2jsElement UI升级为Vue3tsElement Plus&#xff0c;后端流程框架使用Flowable&#xff0c;项目参考了ruoyi-vue-pro(https://gite…

使用python读取yaml文件数据

使用python读取yaml文件&#xff1a; yaml文件数据&#xff1a;data.yaml login_data:url: http://www.baidu.comcase1:user1: password1: 12345errorText: 请输入用户名case2:user2: adminpassword2: errorText: 请输入密码case3:user3: adminpassword3: 123456errorText: 登…