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的作者一个好评 背景：开发中经常会有…...
Llama-3.2V-11B-cot实战：基于SpringBoot构建企业级智能客服原型
Llama-3.2V-11B-cot实战：基于SpringBoot构建企业级智能客服原型 最近在帮一个朋友的公司做技术选型，他们想快速搭建一个智能客服原型，既要成本可控，又要能快速集成到现有的Java技术栈里。聊了一圈，发现很多团队都卡在…...
GB28181视频监控平台EasyCVR助力景区数字化转型，打造一体化视频监控解决方案
随着文旅行业数字化转型进程持续加速，旅游景区的安全管理、服务优化与运营效率提升已成为行业发展的核心诉求。景区场景普遍具有面积广阔、人员流动性强等特点，传统监控方案存在设备兼容性差、可视化管控能力不足等诸多短板，难以满足当前景区…...
等保三级Java安全改造全周期实录，从代码审计到渗透验证的12个生死关卡
第一章：等保三级Java安全改造的合规基线与生命周期全景图等保三级对Java应用提出了覆盖身份鉴别、访问控制、安全审计、通信保密性、代码安全及可信执行环境的全维度要求。其合规基线并非静态清单，而是贯穿需求分析、设计开发、测试验证、上线部署与持续…...
告别信息混乱：Trilium中文版让知识管理像整理衣柜一样简单
告别信息混乱：Trilium中文版让知识管理像整理衣柜一样简单 【免费下载链接】trilium-translation Translation for Trilium Notes. Trilium Notes 中文适配, 体验优化 项目地址: https://gitcode.com/gh_mirrors/tr/trilium-translation 还在为英文笔记软件的…...
【Python内存管理终极指南】：20年专家实测5大智能策略，90%开发者忽略的GC优化盲区揭晓
第一章：Python智能体内存管理策略对比评测报告全景概览本报告聚焦于当前主流Python智能体（Agent）框架在内存管理层面的设计差异与运行表现，涵盖LangChain、LlamaIndex、AutoGen及自研轻量Agent Runtime四大实现。评测维度包括对象…...
**发散创新：基于微应用架构的轻量级权限控制实战设计**在现代前端开
发散创新：基于微应用架构的轻量级权限控制实战设计 在现代前端开发中，**微应用（Micro Frontend）*8 已成为构建复杂单页应用（SPA）的标准方案之一。它允许团队独立开发、部署和维护各自的功能模块，…...
ZGC停顿时间为何突然飙升？3个被90%团队忽略的配置雷区曝光
第一章：ZGC停顿时间为何突然飙升？3个被90%团队忽略的配置雷区曝光 ZGC（Z Garbage Collector）以亚毫秒级停顿著称，但生产环境中频繁出现 10–50ms 甚至更高停顿，往往并非内存压力所致，而是源于几…...
Qwerty Learner可扩展性设计：为未来功能预留空间的完整指南
Qwerty Learner可扩展性设计：为未来功能预留空间的完整指南 【免费下载链接】qwerty-learner 为键盘工作者设计的单词记忆与英语肌肉记忆锻炼软件 / Words learning and English muscle memory training software designed for keyboard workers 项目地址: https:…...
从豆瓣到StyleTalk：手把手教你用真实场景数据微调你的中文对话模型
从豆瓣到StyleTalk：手把手教你用真实场景数据微调你的中文对话模型 当你已经掌握了基座模型微调的基础技能，如何让模型真正理解特定领域的专业术语，或是模仿某种独特的说话风格？本文将带你深入实战，从数据清洗到效果评…...
3步解锁显卡潜力：OptiScaler跨平台开源上采样技术配置攻略
3步解锁显卡潜力：OptiScaler跨平台开源上采样技术配置攻略 【免费下载链接】OptiScaler OptiScaler bridges upscaling/frame gen across GPUs. Supports DLSS2/XeSS/FSR2 inputs, replaces native upscalers, enables FSR3 FG on non-FG titles. Supports Nukem mo…...