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

学习&实践爱好者

于 2024-09-28 20:48:02 发布

阅读量168

点赞数 4

分类专栏： JavaScrip技术 HTML5与CSS3 编程实践系列文章标签： html5 javascript 前端

本文链接：https://blog.csdn.net/cnds123/article/details/142546212

版权

编程实践系列同时被 3 个专栏收录

138 篇文章 22 订阅

订阅专栏

JavaScrip技术

134 篇文章 24 订阅

订阅专栏

HTML5与CSS3

84 篇文章 15 订阅

订阅专栏

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);

            // 绘制灰色网格线#888
            ctx.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>