当前位置： 首页 > news >正文

HTML5+JavaScript绘制闪烁的网格错觉

news 2026/2/10 14:22:03

HTML5+JavaScript绘制闪烁的网格错觉

闪烁的网格错觉（scintillating grid illusion）是一种视觉错觉，通过简单的黑白方格网格和少量的精心设计，能够使人眼前出现动态变化的效果。

闪烁的栅格错觉，是一种经典的视觉错觉现象。网格错觉是指在由黑白相间的格子组成的图案中，观看者会在网格的交叉点处看到并不实际存在的灰色斑点或黑色圆点的现象。最早由德国心理学家卢迪马尔·赫尔曼（Ludimar Hermann）在1870年发现并报告。

如图所示：

HTML5+JavaScript绘制闪烁的网格错觉，源码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>闪烁网格错觉</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #F0FFFF;}canvas {border: 2px solid #333;}</style>
</head>
<body><canvas id="illusion" width="400" height="400"></canvas><script>const canvas = document.getElementById('illusion');const ctx = canvas.getContext('2d');const gridSize = 10;const cellSize = canvas.width / gridSize;function drawGrid() {// 设置黑色背景ctx.fillStyle = 'black';ctx.fillRect(0, 0, canvas.width, canvas.height);// 绘制灰色网格线#888ctx.strokeStyle = '#696969';ctx.lineWidth = 10;// 绘制竖线和横线for (let i = 1; i < gridSize; i++) {const pos = i * cellSize;// 竖线ctx.beginPath();ctx.moveTo(pos, 0);ctx.lineTo(pos, canvas.height);ctx.stroke();// 横线ctx.beginPath();ctx.moveTo(0, pos);ctx.lineTo(canvas.width, pos);ctx.stroke();}// 在交叉点绘制白色圆点ctx.fillStyle = 'white';for (let x = cellSize; x < canvas.width; x += cellSize) {for (let y = cellSize; y < canvas.height; y += cellSize) {ctx.beginPath();ctx.arc(x, y, 5, 0, Math.PI * 2);ctx.fill();}}}drawGrid();</script>
</body>
</html>

相关文章：

HTML5+JavaScript绘制闪烁的网格错觉

HTML5JavaScript绘制闪烁的网格错觉 闪烁的网格错觉&#xff08;scintillating grid illusion&#xff09;是一种视觉错觉&#xff0c;通过简单的黑白方格网格和少量的精心设计&#xff0c;能够使人眼前出现动态变化的效果。 闪烁的栅格错觉&#xff0c;是一种经典的视觉错觉…...

编程日记 2024/9/28 23:25:54

每日OJ题_牛客_拼三角_枚举/DFS_C++_Java

目录 牛客_拼三角_枚举/DFS 题目解析 C代码1 C代码2 Java代码 牛客_拼三角_枚举/DFS 拼三角_枚举/DFS 题目解析 简单枚举&#xff0c;不过有很多种枚举方法&#xff0c;这里直接用简单粗暴的枚举方式。 C代码1 #include <iostream> #include <algorithm> …...

编程日记 2024/9/28 23:21:49

[uni-app]小兔鲜-01项目起步

项目介绍 效果演示 技术架构 创建项目 HBuilderX创建 下载HBuilderX编辑器 HBuilderX/创建项目: 选择模板/选择Vue版本/创建 安装插件: 工具/插件安装/uni-app(Vue3)编译器 vue代码不能直接运行在小程序环境, 编译插件帮助我们进行代码转换 绑定微信开发者工具: 指定微信开…...

编程日记 2024/9/28 23:18:44

安全的价值：构建现代企业的基础

物理安全对于组织来说并不是事后才考虑的问题&#xff1a;它是关键的基础设施。零售商、医疗保健提供商、市政当局、学校和所有其他类型的组织都依赖安全系统来保障其人员和场所的安全。 随着安全技术能力的不断发展&#xff0c;许多组织正在以更广泛的视角看待他们的投资&am…...

编程日记 2024/9/28 23:17:41

门面（外观）模式

简介 门面模式&#xff08;Facade Pattern&#xff09;又叫作外观模式&#xff0c;提供了一个统一的接口&#xff0c;用来访问子系统中的一群接口。其主要特征是定义了一个高层接口&#xff0c;让子系统更容易使用&#xff0c;属于结构型设计模式。 通用模板 创建子系统角色类…...

编程日记 2024/9/28 23:16:40

kotlin flow 使用

1 创建flow 方式1 通过携程扩展函数FlowKt中的flow扩展函数可以直接构建flow&#xff0c;只需要传递FlowCollector收集器实现类就可以了 private fun create1(){val intFlow createFlow()println("创建int flow: $intFlow")runBlocking {println("开始收集&…...

编程日记 2024/9/28 23:15:39

vue3 实现文本内容超过N行折叠并显示“...展开”组件

1. 实现效果 组件内文字样式取决与外侧定义 组件大小发生变化时,文本仍可以省略到指定行数 文本不超过时, 无展开,收起按钮 传入文本发生改变后, 组件展示新的文本 2. 代码 文件名TextEllipsis.vue <template><div ref"compRef" class"wq-text-ellip…...

编程日记 2024/9/28 23:14:37

根据源码解析Vue2中对于对象的变化侦测

UI render(state) VUE的特点是数据驱动视图&#xff0c;在这里可以把数据理解为状态&#xff0c;而视图就是用户可以看到的页面&#xff0c;页面是动态变化的&#xff0c;而他的变化或是用户操作引起&#xff0c;或是后端数据变化引起&#xff0c;这些都可以说是数据的状态变…...

编程日记 2024/9/28 23:13:35

爬虫技术深潜：探究 JsonPath 与 XPath 的语法海洋与实战岛屿

Python爬虫中JSON与XML字符串的XPath和JsonPath过滤语法区别对比 在信息爆炸的互联网时代&#xff0c;数据抓取成为了获取宝贵信息的关键技能。对于技术爱好者&#xff0c;特别是Python程序员来说&#xff0c;熟练掌握JSON和XML数据解析方法至关重要。本文旨在深入探讨这两种格…...

编程日记 2024/9/28 23:12:34

纠删码参数自适应匹配问题ECP-AMP实验方案（一）

摘要 关键词&#xff1a;动态参数&#xff1b;多属性决策&#xff1b;critic权重法&#xff1b;DBSCA聚类分析 引言 云服务存储系统是一种基于互联网的数据存储服务&#xff0c;它可以为用户提供大规模、低成本、高可靠的数据存储空间。云服务存储系统的核心技术之一是数据容…...

编程日记 2024/9/28 23:11:32

五、人物持有武器攻击

一、手部添加预制体&#xff08;武器&#xff09; 1、骨骼&#xff08;手&#xff09; 由于人物模型有骨骼和动画&#xff0c;在添加预制体后&#xff0c;会抓握武器 建一个预制体在手部位置 二、添加武器拖尾 下载拖尾特效 赋值特效中的代码&#xff0c;直接使用 清空里面…...

编程日记 2024/9/28 23:08:27

mysql索引 -- 全文索引介绍(如何创建,使用),explain关键字

目录 全文索引 引入 介绍 创建 使用 表数据 简单搜索 explain关键字 使用全文索引 mysql索引结构详细介绍 -- mysql索引 -- 索引的硬件理解(磁盘,磁盘与系统),软件理解(mysql,与系统io,buffer pool),索引结构介绍和理解(page内部,page之间,为什么是b树)-CSDN博客 全文…...

编程日记 2024/9/28 23:07:26

Wayfair封号的常见原因及解决方案解析

近期关于Wayfair账号封禁的问题引发了广泛讨论。许多用户报告称&#xff0c;他们的Wayfair账户被突然封禁&#xff0c;这一现象不仅影响了用户的购物体验&#xff0c;也对Wayfair的品牌形象造成了一定的冲击。本文将深入探讨Wayfair封号的原因&#xff0c;并提出相应的解决方案…...

编程日记 2024/9/28 23:05:24

计算机视觉方面的一些模块

# __all__ 是一个可选的列表&#xff0c;定义在模块级别。当使用 from ... import * 语句时&#xff0c;如果模块中定义了 # __all__&#xff0c;则只有 __all__ 列表中的名称会被导入。这是模块作者控制哪些公开API被导入的一种方式。 # 使用 * 导入的行为 # 如果模块中有 __a…...

编程日记 2024/9/28 23:04:22

进阶美颜功能技术开发方案：探索视频美颜SDK

视频美颜SDK&#xff08;SoftwareDevelopmentKit&#xff09;作为提升视频质量的重要工具&#xff0c;越来越多地被开发者关注与应用。接下俩&#xff0c;笔者将深入探讨进阶美颜功能的技术开发方案&#xff0c;助力开发者更好地利用视频美颜SDK。 一、视频美颜SDK的核心功能 …...

编程日记 2024/9/28 23:03:22

【重学 MySQL】三十八、group by的使用

【重学 MySQL】三十八、group by的使用 基本语法示例示例 1: 计算每个部门的员工数示例 2: 计算每个部门的平均工资示例 3: 结合 WHERE 子句 WITH ROLLUP基本用法示例注意事项 注意事项 GROUP BY 是 SQL 中一个非常重要的子句&#xff0c;它通常与聚合函数&#xff08;如 COUNT…...

编程日记 2024/9/28 23:02:21

SSM框架VUE电影售票管理系统开发mysql数据库redis设计java编程计算机网页源码maven项目

一、源码特点 smm VUE电影售票管理系统是一套完善的完整信息管理类型系统&#xff0c;结合SSM框架和VUE、redis完成本系统&#xff0c;对理解vue java编程开发语言有帮助系统采用ssm框架&#xff08;MVC模式开发&#xff09;&#xff0c;系 统具有完整的源代码和数据库&#…...

编程日记 2024/9/28 23:01:20

基于Hive和Hadoop的白酒分析系统

本项目是一个基于大数据技术的白酒分析系统&#xff0c;旨在为用户提供全面的白酒市场信息和深入的价格分析。系统采用 Hadoop 平台进行大规模数据存储和处理&#xff0c;利用 MapReduce 进行数据分析和处理&#xff0c;通过 Sqoop 实现数据的导入导出&#xff0c;以 Spark 为核…...

编程日记 2024/9/28 23:00:19

【软考】高速缓存的组成

目录 1. 说明2. 组成 1. 说明 1.高速缓存用来存放当前最活跃的程序和数据。2.高速缓存位于CPU 与主存之间。3.容量般在几千字节到几兆字节之间。4.速度一般比主存快 5~10 倍&#xff0c;由快速半导体存储器构成。5.其内容是主存局部域的副本&#xff0c;对程序员来说是透明的。…...

编程日记 2024/9/28 22:59:18

UniApp基于xe-upload实现文件上传组件

xe-upload地址&#xff1a;文件选择、文件上传组件&#xff08;图片&#xff0c;视频&#xff0c;文件等&#xff09; - DCloud 插件市场 致敬开发者&#xff01;&#xff01;&#xff01; 感觉好用的话&#xff0c;给xe-upload的作者一个好评 背景&#xff1a;开发中经常会有…...

编程日记 2024/9/28 22:58:16

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

编程新知 2026/2/10 7:12:07

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2026/1/25 13:18:12

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2026/1/26 21:57:45

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/8/9 0:31:20

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2026/1/29 17:06:33

企业如何增强终端安全？

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2026/1/29 9:14:58

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

编程新知 2026/1/27 16:41:02

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数 在软件开发中，单例模式（Singleton Pattern）是一种常见的设计模式，确保一个类仅有一个实例，并提供一个全局访问点。在多线程环境下，实现单例模式时需要注意线程安全问题，以防止多个线程同时创建实例，导致…...

编程新知 2025/11/25 19:50:27

08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

编程新知 2025/10/31 20:37:10