首页用canvas绘制6x6方格调色板

用canvas绘制6x6方格调色板

时间: 2024-09-22 07:05:40 浏览: 50

在HTML5 Canvas上创建一个6x6的方格调色板，首先你需要设置画布大小并获取它的2D渲染上下文。然后，通过循环遍历每个小方格，并分别为它们赋予不同的颜色。这是一个基本的步骤： ```html <!DOCTYPE html> <html> <body> <canvas id="colorPalette" width="360" height="360"></canvas> <script> // 获取Canvas元素和渲染上下文 const canvas = document.getElementById('colorPalette'); const ctx = canvas.getContext('2d'); // 定义一个函数用于绘制单个小方格 function drawSquare(x, y, color) { ctx.fillStyle = color; ctx.fillRect(x * 40 + 20, y * 40 + 20, 40, 40); } // 创建6x6方格的颜色数组 const colors = ['red', 'blue', 'green', 'yellow', 'orange', 'purple']; // 循环绘制每个小方格 for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { drawSquare(i * 60, j * 60, colors[i * 6 + j]); // 根据索引从颜色数组选择颜色 } } </script> </body> </html> ``` 在这个示例中，我们先设置了画布的宽度和高度为360px，因为每个方格是40px宽高，所以总面积是6乘以6。`drawSquare`函数负责在指定位置和颜色下填充一个方块。最后两层循环分别对应行和列，将每个颜色应用到相应的方格。

阅读全文