如何用选中颜色填充Canvas画布？实现选色与清空功能
2026-5-19
Canvas颜色填充与清空功能实现方案
我帮你搞定这个需求啦！下面是完整的可运行代码，包含了你需要的所有功能：通过下拉框选择白色、红色、蓝色、绿色，点击「添加颜色」按钮填充Canvas画布，点击「清空」按钮重置画布为初始白色。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Canvas颜色填充器</title> <style> canvas { border: 1px solid #ccc; margin: 10px 0; } .controls { margin: 10px 0; } button { margin-left: 8px; padding: 4px 12px; } </style> </head> <body> <div class="controls"> <select id="colorSelect"> <option value="#ffffff">白色</option> <option value="#ff0000">红色</option> <option value="#0000ff">蓝色</option> <option value="#008000">绿色</option> </select> <button id="addColorBtn">添加颜色</button> <button id="clearBtn">清空</button> </div> <canvas id="colorCanvas" width="400" height="300"></canvas> <script> // 获取Canvas元素和2D绘图上下文 const canvas = document.getElementById('colorCanvas'); const ctx = canvas.getContext('2d'); // 页面加载时初始化画布为白色 function resetCanvas() { ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, canvas.width, canvas.height); } resetCanvas(); // 获取控制元素 const colorSelect = document.getElementById('colorSelect'); const addColorBtn = document.getElementById('addColorBtn'); const clearBtn = document.getElementById('clearBtn'); // 「添加颜色」按钮点击事件：用选中的颜色填充整个画布 addColorBtn.addEventListener('click', () => { const selectedColor = colorSelect.value; ctx.fillStyle = selectedColor; ctx.fillRect(0, 0, canvas.width, canvas.height); }); // 「清空」按钮点击事件：重置画布为白色，同时把下拉框切回白色选项 clearBtn.addEventListener('click', () => { resetCanvas(); colorSelect.value = '#ffffff'; }); </script> </body> </html>
几个细节说明：
- 我给Canvas加了灰色边框，方便你一眼看清画布的范围；
- 专门写了
resetCanvas函数来统一处理画布重置逻辑，以后要改初始颜色的话，只需要改这一处就行； - 清空按钮不仅会把画布变回白色，还会同步把下拉框选中白色，让用户的操作体验更连贯；
- 颜色用十六进制值来定义，比直接用颜色名称（比如"red"）更稳定，也方便你以后扩展更多颜色选项；
你直接复制这段代码到HTML文件里就能运行，完全满足你的需求~
内容的提问来源于stack exchange，提问作者Anderson Trugilio
