HTML5+JavaScript绘制闪烁的网格错觉
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绘制闪烁的网格错觉 闪烁的网格错觉（scintillating grid illusion）是一种视觉错觉，通过简单的黑白方格网格和少量的精心设计，能够使人眼前出现动态变化的效果。 闪烁的栅格错觉，是一种经典的视觉错觉…...
每日OJ题_牛客_拼三角_枚举/DFS_C++_Java
目录 牛客_拼三角_枚举/DFS 题目解析 C代码1 C代码2 Java代码 牛客_拼三角_枚举/DFS 拼三角_枚举/DFS 题目解析 简单枚举，不过有很多种枚举方法，这里直接用简单粗暴的枚举方式。 C代码1 #include <iostream> #include <algorithm> …...
[uni-app]小兔鲜-01项目起步
项目介绍 效果演示 技术架构 创建项目 HBuilderX创建 下载HBuilderX编辑器 HBuilderX/创建项目: 选择模板/选择Vue版本/创建 安装插件: 工具/插件安装/uni-app(Vue3)编译器 vue代码不能直接运行在小程序环境, 编译插件帮助我们进行代码转换 绑定微信开发者工具: 指定微信开…...
安全的价值：构建现代企业的基础
物理安全对于组织来说并不是事后才考虑的问题：它是关键的基础设施。零售商、医疗保健提供商、市政当局、学校和所有其他类型的组织都依赖安全系统来保障其人员和场所的安全。 随着安全技术能力的不断发展，许多组织正在以更广泛的视角看待他们的投资&am…...
门面（外观）模式
简介 门面模式（Facade Pattern）又叫作外观模式，提供了一个统一的接口，用来访问子系统中的一群接口。其主要特征是定义了一个高层接口，让子系统更容易使用，属于结构型设计模式。 通用模板 创建子系统角色类…...
kotlin flow 使用
1 创建flow 方式1 通过携程扩展函数FlowKt中的flow扩展函数可以直接构建flow，只需要传递FlowCollector收集器实现类就可以了 private fun create1(){val intFlow createFlow()println("创建int flow: $intFlow")runBlocking {println("开始收集&…...
vue3 实现文本内容超过N行折叠并显示“...展开”组件
1. 实现效果 组件内文字样式取决与外侧定义 组件大小发生变化时,文本仍可以省略到指定行数 文本不超过时, 无展开,收起按钮 传入文本发生改变后, 组件展示新的文本 2. 代码 文件名TextEllipsis.vue <template><div ref"compRef" class"wq-text-ellip…...
根据源码解析Vue2中对于对象的变化侦测
UI render(state) VUE的特点是数据驱动视图，在这里可以把数据理解为状态，而视图就是用户可以看到的页面，页面是动态变化的，而他的变化或是用户操作引起，或是后端数据变化引起，这些都可以说是数据的状态变…...
爬虫技术深潜：探究 JsonPath 与 XPath 的语法海洋与实战岛屿
Python爬虫中JSON与XML字符串的XPath和JsonPath过滤语法区别对比 在信息爆炸的互联网时代，数据抓取成为了获取宝贵信息的关键技能。对于技术爱好者，特别是Python程序员来说，熟练掌握JSON和XML数据解析方法至关重要。本文旨在深入探讨这两种格…...
纠删码参数自适应匹配问题ECP-AMP实验方案（一）
摘要 关键词：动态参数；多属性决策；critic权重法；DBSCA聚类分析 引言 云服务存储系统是一种基于互联网的数据存储服务，它可以为用户提供大规模、低成本、高可靠的数据存储空间。云服务存储系统的核心技术之一是数据容…...
五、人物持有武器攻击
一、手部添加预制体（武器） 1、骨骼（手） 由于人物模型有骨骼和动画，在添加预制体后，会抓握武器 建一个预制体在手部位置 二、添加武器拖尾 下载拖尾特效 赋值特效中的代码，直接使用 清空里面…...
mysql索引 -- 全文索引介绍(如何创建,使用),explain关键字
目录 全文索引 引入 介绍 创建 使用 表数据 简单搜索 explain关键字 使用全文索引 mysql索引结构详细介绍 -- mysql索引 -- 索引的硬件理解(磁盘,磁盘与系统),软件理解(mysql,与系统io,buffer pool),索引结构介绍和理解(page内部,page之间,为什么是b树)-CSDN博客 全文…...
Wayfair封号的常见原因及解决方案解析
近期关于Wayfair账号封禁的问题引发了广泛讨论。许多用户报告称，他们的Wayfair账户被突然封禁，这一现象不仅影响了用户的购物体验，也对Wayfair的品牌形象造成了一定的冲击。本文将深入探讨Wayfair封号的原因，并提出相应的解决方案…...
计算机视觉方面的一些模块
# __all__ 是一个可选的列表，定义在模块级别。当使用 from ... import * 语句时，如果模块中定义了 # __all__，则只有 __all__ 列表中的名称会被导入。这是模块作者控制哪些公开API被导入的一种方式。 # 使用 * 导入的行为 # 如果模块中有 __a…...
进阶美颜功能技术开发方案：探索视频美颜SDK
视频美颜SDK（SoftwareDevelopmentKit）作为提升视频质量的重要工具，越来越多地被开发者关注与应用。接下俩，笔者将深入探讨进阶美颜功能的技术开发方案，助力开发者更好地利用视频美颜SDK。 一、视频美颜SDK的核心功能 …...
【重学 MySQL】三十八、group by的使用
【重学 MySQL】三十八、group by的使用 基本语法示例示例 1: 计算每个部门的员工数示例 2: 计算每个部门的平均工资示例 3: 结合 WHERE 子句 WITH ROLLUP基本用法示例注意事项 注意事项 GROUP BY 是 SQL 中一个非常重要的子句，它通常与聚合函数（如 COUNT…...
SSM框架VUE电影售票管理系统开发mysql数据库redis设计java编程计算机网页源码maven项目
一、源码特点 smm VUE电影售票管理系统是一套完善的完整信息管理类型系统，结合SSM框架和VUE、redis完成本系统，对理解vue java编程开发语言有帮助系统采用ssm框架（MVC模式开发），系 统具有完整的源代码和数据库&#…...
基于Hive和Hadoop的白酒分析系统
本项目是一个基于大数据技术的白酒分析系统，旨在为用户提供全面的白酒市场信息和深入的价格分析。系统采用 Hadoop 平台进行大规模数据存储和处理，利用 MapReduce 进行数据分析和处理，通过 Sqoop 实现数据的导入导出，以 Spark 为核…...
【软考】高速缓存的组成
目录 1. 说明2. 组成 1. 说明 1.高速缓存用来存放当前最活跃的程序和数据。2.高速缓存位于CPU 与主存之间。3.容量般在几千字节到几兆字节之间。4.速度一般比主存快 5~10 倍，由快速半导体存储器构成。5.其内容是主存局部域的副本，对程序员来说是透明的。…...
UniApp基于xe-upload实现文件上传组件
xe-upload地址：文件选择、文件上传组件（图片，视频，文件等） - DCloud 插件市场 致敬开发者！！！ 感觉好用的话，给xe-upload的作者一个好评 背景：开发中经常会有…...
vscode里如何用git
打开vs终端执行如下： 1 初始化 Git 仓库（如果尚未初始化） git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...
css实现圆环展示百分比，根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
黑马Mybatis
Mybatis 表现层：页面展示 业务层：逻辑处理 持久层：持久数据化保存 在这里插入图片描述 Mybatis快速入门 
逻辑回归：给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告（肿瘤大小、血液指标），你需要做出一个**决定性判断**：恶性还是良性？这种“非黑即白”的抉择，正是**逻辑回归（Logistic Regression）** 的战场&a…...
第25节 Node.js 断言测试
Node.js的assert模块主要用于编写程序的单元测试时使用，通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试，通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...
UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
大学生职业发展与就业创业指导教学评价
这里是引用 作为软工2203/2204班的学生，我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要，而您认真负责的教学态度，让课程的每一部分都充满了实用价值。 尤其让我…...
嵌入式学习笔记DAY33（网络编程——TCP）
一、网络架构 C/S （client/server 客户端/服务器）：由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序，负责提供用户界面和交互逻辑 ，接收用户输入，向服务器发送请求，并展示服务…...
C语言中提供的第三方库之哈希表实现
一. 简介 前面一篇文章简单学习了C语言中第三方库（uthash库）提供对哈希表的操作，文章如下： C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...
Elastic 获得 AWS 教育 ISV 合作伙伴资质，进一步增强教育解决方案产品组合
作者：来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布，Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明，Elastic 作为 …...