canvas高级动画001:文字瀑布流

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

文章目录

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

我们经常会看到一些科技场景,01数字不断交替下移或者扩散闪现等。这里是一个示例,通过setInterval的方式,来不断的绘制文字,形成瀑布流的状态。

示例效果图

在这里插入图片描述

示例源代码(共88行)


/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-11-25
*/
<template><div class="container"><div class="top"><h3>canvas文字瀑布流特效</h3><div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div></div><div class="dajianshi "><canvas id="dajianshi" width="1000" height="500"></canvas></div></div>
</template>
<script>export default {data() {return {}},mounted() {this.getdata()},methods: {getdata() {var canvas = document.getElementById('dajianshi');var context = canvas.getContext('2d');var fontSize = 16;var col = Math.floor(1000 / fontSize);var cpy = [];for (var i = 0; i < col; i++) {cpy[i] = 1;}//定义文字var str = "dajianshidajianshi";draw();setInterval(draw, 30);function draw() {context.beginPath();context.fillStyle = "rgba(0,0,0,0.05)";context.fillRect(0, 0, 1000, 500);context.font = "16px bold 微软雅黑 ";context.fillStyle = "#00cc33";for (var i = 0; i < col; i++) {var index = Math.floor(Math.random() * str.length);var x = i * fontSize;var y = cpy[i] * fontSize;context.fillText(str.charAt(index), x, y);if (y >= 500 && Math.random() > 0.98) {cpy[i] = 0; // 只要Math.random> 0.98 时才纵坐标从0开始写字}cpy[i]++;}}},}}
</script><style scoped>.container {width: 1000px;height: 600px;margin: 50px auto;border: 1px solid green;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: darkgreen;color: #fff;}.dajianshi {margin: 2px auto 0;width: 1000px;height: 500px;}
</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/168376.shtml

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

相关文章

elk 简单操作手册

1.1. 基础概念 EFK不是一个软件,而是一套解决方案,开源软件之间的互相配合使用,高效的满足了很多场合的应用,是目前主流的一种日志系统。 EFK是三个开源软件的缩写,分别表示:Elasticsearch , Filebeat, Kibana , 其中Elasticsearch负责日志保存和搜索,Filebeat负责收集日志,Ki…

Spring Boot 3.2.0 现已推出

Spring Boot 3.2.0 已经发布&#xff0c;并且可以从 Maven Central 获取。 此版本添加了大量新功能和改进。有关完整的[升级说明](https://github.com/spring-projects/spring-boot/wiki/Spring-Boot-3.2.0-Release-Notesupgrading-from-spring-boot-31)以及[值得注意的新](ht…

EI期刊完整程序:MEA-BP思维进化法优化BP神经网络的回归预测算法,可作为对比预测模型,丰富内容,直接运行,免费

适用平台&#xff1a;Matlab 2020及以上 本程序参考中文EI期刊《基于MEA⁃BP神经网络的建筑能耗预测模型》&#xff0c;程序注释清晰&#xff0c;干货满满&#xff0c;下面对文章和程序做简要介绍。 适用领域&#xff1a;风速预测、光伏功率预测、发电功率预测、碳价预测等多…

eclipse项目移到idea上部署运行

1.配置web模块 另外&#xff0c;模块这里&#xff0c;也要加上Spring 2.配置Artifact &#xff08;用于tomcat&#xff09; 就是从上面配置的web模块&#xff0c;产生的工件 3.添加lib 一般是在web-inf/lib &#xff0c; 遇到的坑&#xff1a; jdk版本问题&#xff0c;这里…

proto语法学习笔记

proto语法学习笔记 Protocol Buffers&#xff08;Proto是由谷歌开发的一种数据序列化格式。 Proto 不是一种编程语言&#xff0c;而是一种接口描述语言&#xff08;IDL&#xff09;&#xff0c;用于定义数据结构和消息格式。 它的设计目标是提供一种简单、高效、可扩展的方法来…

使用STM32+SPI Flash模拟U盘

试验目的&#xff1a;使用STM32F103C8T6 SPI Flash&#xff08;WSQ16&#xff09;实现模拟U盘的功能 SPI Flash读写说明&#xff1a; Step1 设置SPI1 用于读取SPI Flash&#xff1b; Step2&#xff1a;设置SPI Flash 的使能信号 Step3&#xff1a;使能USB通信 Step4&#xf…

人机交互2——任务型多轮对话的控制和生成

1.自然语言理解模块 2.对话管理模块 3.自然语言生成模块

C++模拟如何实现vector的方法

任意位置插入&#xff0c;insert的返回值为新插入的第一个元素位置的迭代器&#xff1b;因为插入可能会进行扩容&#xff0c;导致start的值改变&#xff0c;所以先定义一个变量保存pos与start的相对位置&#xff1b;判断是否需要扩容&#xff1b;从插入位置开始&#xff0c;将所…

WorldWind Android上加载白模数据

这篇文章介绍下如何加载白模数据。这个白模数据的格式是shapefile格式的文件。白模数据拷贝到手机本地&#xff0c;然后读取白模数据&#xff0c;进行加载展示。 worldwind android本身是不支持加载白模数据的&#xff0c;但是可以根据现有提供的加载Polygons的方式&#xff0c…

【JUC】一篇通关JUC并发之共享模型

目录 1. 共享带来的问题1-1. 临界区 Critical Section1-2. 竞态条件 Race Condition1-3. synchronized 解决方案 1. 共享带来的问题 1-1. 临界区 Critical Section 一个程序运行多个线程本身是没有问题的问题出在多个线程访问共享资源 多个线程读共享资源其实也没有问题在多个…

基于单片机的消防巡逻小车设计

智能小车循迹与避障运动控制系统的设计 摘 要:本设计主要由STC89C52单片机来进行控制&#xff0c;通过输入输出两个端口控制驱动模块来调节电机的工作状态。本设计预利用机器视觉&#xff0c;通过识别条带状路标实现自主导航且利用超声波模块实时检测距离以实现避障功能&…

Linux:Ubuntu实现远程登陆

1、查看sshd服务是否存在 Ubuntu默认是没有安装sshd服务的&#xff0c;所以&#xff0c;无法远程登陆。 检查22端口是否存在 netstat -anp 该命令执行后&#xff0c;查看不到22端口的进程。 如果netstat无法使用&#xff0c;我们需要安装一下netstat服务 sudo apt-get install…

模板初阶(1):函数模板,类模板

一、函数模板 1.1 概念 函数模板代表了一个函数家族&#xff0c;该函数模板与类型无关&#xff0c;在使用时被参数化&#xff0c;根据实参类型产生函数的特定类型版本。 格式&#xff1a; template <typename T>或template <class T> template <class T>…

微信小程序内部跳到外部小程序

要在微信小程序中跳转到外部小程序&#xff0c;可以使用wx.navigateToMiniProgram函数。以下是一个示例&#xff1a; wx.navigateToMiniProgram({appId: 外部小程序的appId,path: 外部小程序的路径,extraData: {id: xxx},success(res) {// 跳转成功} })在这个示例中&#xff0…

jetson NX部署Yolov8

一,事情起因,由于需要对无人机机载识别算法进行更新,所以需要对yolov8算法进行部署到边缘端。 二,环境安装 安装虚拟环境管理工具,这个根据个人喜好。 我们需要选择能够在ARM架构上运行的conda,这里我们选择conda-forge 下载地址 安装即可 剩下的就是和conda 创建虚拟…

k8s上Pod全自动调度、定向调度、亲和性调度、污点和容忍调度详解

目录 一.Pod调度简介 二.Deployment/RC全自动调度 1.简介 2.案例演示 &#xff08;1&#xff09;Deployment &#xff08;2&#xff09;RC 三.nodeSelector/nodeName指定节点调度 1.原理简介 &#xff08;1&#xff09;nodeSelector原理 &#xff08;2&#xff09;no…

管理类联考——数学——汇总篇——知识点突破——应用题——路程——记忆

路程——【考频&#xff1a;高】——【解题提示&#xff1a;根据题意画图&#xff0c;找等量关系&#xff08;一般是时间和路程&#xff09;&#xff0c;列方程求解。】 【 应用题 ⟹ \Longrightarrow ⟹ 路程 ⟹ \Longrightarrow ⟹ 直线 ⟹ \Longrightarrow ⟹ 匀速、相遇、…

Kafka 集群如何实现数据同步

Kafka 介绍 Kafka 是一个高吞吐的分布式消息系统&#xff0c;不但像传统消息队列&#xff08;RaabitMQ、RocketMQ等&#xff09;那样能够【异步处理、流量消峰、服务解耦】 还能够把消息持久化到磁盘上&#xff0c;用于批量消费。除此之外由于 Kafka 被设计成分布式系统&…

数字图像处理(实践篇)二 画出图像中目标的轮廓

目录 一 涉及的OpenCV函数 二 代码 三 效果图 一 涉及的OpenCV函数 contours, hierarchy cv2.findContours(image, mode, method[, contours[, hierarchy[, offset ]]]) image&#xff1a;源图像。mode&#xff1a;轮廓的检索方式。cv2.RETR_EXTERNAL&#xff08;只检测…

Xcode:does not contain bitcode

1.错误描述 使用了第三方库错误提示如下&#xff1a; ld: xxx does not contain bitcode. You must rebuild it with bitcode enabled (Xcode setting ENABLE_BITCODE), obtain an updated library from the vendor, or disable bitcode for this target. xxx for architectur…