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

在这里插入图片描述

查看专栏目录

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.mzph.cn/news/615597.shtml

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

相关文章

sqlilabs第五十一五十二关

Less-51(GET - Error based - ORDER BY CLAUSE-String- Stacked injection) 手工注入 源码 单引号闭合用注释(没有后续输出只能堆叠注入) 自动注入 和上一关一样 Less-52(GET - Bind based - ORDER BY CLAUSE-numeric- Stacked injection) 手工注入 数字类型 不用注释直接…

gcc/g++工具详解

目录 一、安装gcc/g 二、背景知识 三、相关选项 四、gcc如何工作 1.预处理 2.编译 3.汇编 4.链接 5.函数库的概念 6.动静态库 一、安装gcc/g gcc/g -v : 用来查看当前你使用的gcc/g版本 因为我的gcc/g是升级过的所以版本更高&#xff0c;如果你用的是centos7.6的话…

干货|Google ads谷歌广告投放详细步骤与技巧

对于跨境电商、独立站运营的卖家来说&#xff0c;谷歌广告投放是必备的流量拓展来源&#xff0c;但是在投入运营之前&#xff0c;你需要完整了解谷歌广告投放详细步骤&#xff0c;以为你丝滑地进行有效投放做好基础&#xff0c;下面为大家整理具体的谷歌投放技巧与步骤&#xf…

BIOS知识枝桠——认识主板

文章目录 前言一、主要构成二、I/O区域1.I/O区域2.CPU区域与内存区域3.拓展区域4.南桥区域与外围接口 其他 前言 主板由电路板铜线芯片针脚数千个精密的元器件组合构成&#xff0c;是把显卡、内存、CPU等核心硬件串在一起的骨架&#xff0c;在计算机中发挥着重要的作用。文章以…

箭头函数与普通函数的差异

一、箭头函数中的this指向 箭头函数的this指向通常有两种情况 如果箭头函数处在一个普通函数之中&#xff0c;那么他的this指向与包裹他的外层函数的this指向一致。其他情况下箭头函数中的this都指向window let obj {fn:function(){console.log(我是普通函数,this obj) …

[渗透测试学习] Surveillance -HackTheBox

文章目录 信息搜集getshell提权信息搜集 nmap扫描端口 nmap -sV -sC -v -p- --min-rate 1000 10.10.11.245扫出来两个端口,其中80端口有http服务并且重定向到surveillance.htb 那么我们添加下域名然后访问80端口,发现是企业网站尝试扫描子域名和目录无果后,用Wappalyzer插…

vue3中的hook公共函数封装及运用

vue3 中的 hooks 就是函数的一种写法&#xff0c;就是将文件的一些单独功能的js代码进行抽离出来&#xff0c;放到单独的js文件中&#xff0c;或者说是一些可以复用的公共方法/功能 使用Vue3的组合API封装的可复用的功能函数自定义hook的作用类似于vue2中的mixin技术自定义Hook…

NetCore部署微服务(三)

接上文&#xff0c;服务端部署完成之后&#xff0c;同样我们也需要修改一下客户端代码 Blocking Queries 1.1 服务发现 在客户端代码中使用Nuget安装consul包 修改配置文件&#xff0c;我们首先需要把consul的请求地址配置在配置文件中 修改control方法 using Consul; usin…

复选框QCheckBox和分组框QGroupBox

1. 复选框&#xff1a;QCheckBox 实例化 //实例化 // QCheckBox* checkBox new QCheckBox("是否同意该条款",this);QCheckBox* checkBox new QCheckBox(this);1.1 代码实现 1.1.1 复选框的基本函数 复选框选中状态的参数 Qt::Unchecked //未选中状态 Qt::Part…

学习C指针

指针基本介绍 计算机中的每个内存都有地址 整型分配4字节&#xff0c;字符分配1字节 &#xff0c;浮点数分配4字节 指针是一个变量&#xff0c;它存放着另外一个变量的地址 int a; int *p; p &a;// a 5; printf(p) //get a address print &a //get a address …

chatgpt免费使用的网站

前言 如果您认为本文对你有帮助&#xff0c;希望可以点赞收藏&#xff01;感谢您的支持 下面我为你推荐我自己在用的gpt类工具&#xff0c;帮你在工作学习生活上解决一些大小问题 &#x1f389;智能GPT 地址&#xff1a; https://meet.adminjs.net 在他的详情中有详细的使用…

半监督学习 - 自训练(Self-training)

什么是机器学习 半监督学习中的自训练&#xff08;Self-training&#xff09;是一种利用已标记数据和未标记数据进行模型训练的方法。以下是自训练的详细教程&#xff1a; 步骤一&#xff1a;准备数据集 标记数据集&#xff1a; 收集和标记一小部分数据&#xff0c;用于有监…

Pandas实战100例 | 案例 21: 条件运算

案例 21: 条件运算 知识点讲解 在 Pandas 中进行条件运算可以用于创建新的列或修改现有的列,基于一定的条件逻辑。这些运算通常结合布尔索引或 apply 方法进行。 布尔条件运算: 可以根据列之间的比较生成布尔值列。apply 方法进行条件运算: 使用 apply 方法可以在 DataFrame…

ubuntu18.04.6 搭建mqtt服务器emqx 之docker方式

ubuntu18.04.6 搭建mqtt服务器emqx 之docker方式 前提docker环境已经安装好 如未安装&#xff0c;请参考博文https://blog.csdn.net/a554521655/article/details/134251763 文章目录 ubuntu18.04.6 搭建mqtt服务器emqx 之docker方式安装emqx查看是否安装并启动成功登录前端查 安…

电动车充气泵方案芯片应用设计

技术工程师在做产品方案开发之前&#xff0c;首先也是最重要的就是芯片选型。为什么这样说呢&#xff1f;那是因为芯片是整个方案设计中&#xff0c;最至关重要的一环&#xff0c;没有它&#xff0c;后面的工作将无法进行&#xff0c;只有将芯片核心基础定下来&#xff0c;后面…

FastAdmin西陆教育系统(xiluEdu)开源代码

应用介绍 一款基于FastAdminThinkPHPUniapp开发的西陆教育系统&#xff08;微信小程序、移动端H5、安卓APP、IOS-APP&#xff09;&#xff0c;以下是教育系统所包含的一些功能&#xff1a; 视频课程&#xff1a;教育系统提供在线视频课程&#xff0c;学生可以通过网络观看教师…

每日一题——LeetCode1154.一年中的第几天

方法一 列举法&#xff1a; 用一个数组把每个月份的天数都列举出来 判断闰年&#xff0c;是闰年2月份有29天 循环对当前月份之前的月份天数求和 加上当天月份的天数 var dayOfYear function(date) {let year date.slice(0, 4);let month date.slice(5, 7);let day dat…

Android 13 辅助屏导航栏不显示问题

问题 在Android 13 上开启辅助屏幕。但是发现辅助屏systemui 导航按 icon没有显示,但是点击对应的区域有作用 分析 可以用 anroid device monitor 工具分析视图 解决 public NavigationBarView(Context context, AttributeSet attrs) {super(context, attrs);//add star…

Python 开源 Web 应用框架 Django 简介 应用场景 优势 不足

简介 Django 是一个开放源代码的 Web 应用框架&#xff0c;使用 Python 编程语言编写。它遵循了 “MTV”&#xff08;模型-模板-视图&#xff09;的设计模式&#xff0c;旨在帮助开发者快速构建高质量、易维护的 Web 应用程序。 应用场景 Web 应用开发&#xff1a;Django 适…

【一、测试基础】Java基础语法

Java 的用法及注意事项有很多&#xff0c;今天的目标是了解Java基础语法&#xff0c;且能够输出"hello world" 几个基础的概念 对象&#xff1a;对象是类的一个实例&#xff0c;有状态和行为。一只猫是一个对象&#xff0c;猫的状态有&#xff1a;颜色、名字、品种&…