当前位置： 首页 > news >正文

js实现填涂画板

news 2026/3/26 22:59:03

文章目录

  • 1实现效果
  • 2 实现代码

凑个数，存粹是好玩儿，哈哈...

1实现效果

在这里插入图片描述

最上方一栏：
左侧是颜色按钮，点击选中颜色，
中间是功能按钮，重置颜色、清空画板、回退、涂改液（填涂色置为白色）
右侧是显示当前所选颜色

下方填涂板是表格实现的。

2 实现代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>画图板</title><style>* {margin: 0px;padding: 0px;}#bt {display: flex;margin-top: 5px;height: 30px;box-sizing: border-box;}.bt1 {padding-left: 20px;flex: 1;box-sizing: border-box;}.bt2 {flex: 1;text-align: center;}.bt3 {flex: 1;font-size: 20px;}#content {margin-top: 10px;}table {border-collapse: collapse;}td {width: 25px;height: 25px;border: 0.5px solid gray;}td:hover {background-color: gray;}.b1 {margin-left: 10px;width: 15px;height: 15px;}.b2 {margin-right: 10px;width: 100px;line-height: 27px;background-color: lightgray;border: none;border-radius: 10px;}.b1:hover {width: 20px;height: 20px;}.b2:hover {background-color: lightblue;}#colorName {display: inline-block;color: red;width: 200px;height: 30px;text-align: center;background-color: gray;}</style>
</head><body><div id="bt"><div class="bt1"></div><div class="bt2"><button class="b2">重置颜色</button><button class="b2">清空画板</button><button class="b2">后退一步</button><button class="b2">涂改液</button></div><div class="bt3">当前所选颜色为：<span id="colorName">rgb(255,0,0)</span></div></div><div id="content"></div><script>// 存放改变颜色的td索引let bakeTable = [];let div = document.getElementById('content');let width = 60;let height = 25;// 初始化颜色按钮createColorTable();// 打印画板let str = "<table>"for (let i = 0; i < height; i++) {str += "<tr>"for (let j = 0; j < width; j++) {str += "<td></td>";}str += '</tr>';}str += "</table>"div.innerHTML = str;// 给td加事件let tds = document.querySelectorAll("td");tds.forEach((td,i) => {td.onclick = setColor.bind(td,null,i);});// 获取功能按钮let buts_2 = document.querySelectorAll('.b2');// 获取颜色名称let tdColorName = document.querySelector("#colorName");// 初始化颜色let butColor = 'rgb(255,0,0)';// 按钮功能buts_2[0].onclick = createColorTable;buts_2[1].onclick = clearCanvas;buts_2[2].onclick = backStep;buts_2[3].onclick = function(){butColor = 'rgb(255, 255, 255)';tdColorName.innerHTML = butColor;tdColorName.style.color = butColor;};function getColor(but) {but = this;butColor = but.style.backgroundColor;tdColorName.innerHTML = butColor;tdColorName.style.color = butColor;}function setColor(td,i) {td = this;td.style.backgroundColor = butColor;bakeTable.push(i);}function randomColor() {let color = "#";let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];for (let i = 0; i < 6; i++) {let index = parseInt(Math.random() * arr.length);color += arr[index];}return color;}function createColorTable() {let btn_str = '';for (let i = 0; i < 15; i++) {btn_str += '<button class="b1" style="background-color: ' + randomColor() + '"></button>';}document.querySelector('.bt1').innerHTML = btn_str;let buts = document.querySelectorAll('.b1');buts.forEach(but => {but.onclick = getColor;})}function clearCanvas(){document.querySelectorAll("td").forEach(td=>{td.style.backgroundColor = "";})}function backStep(){if(bakeTable.length>0){let i = bakeTable.pop();document.querySelectorAll("td")[i].style.backgroundColor = "";}}</script>
</body></html>

相关文章：

js实现填涂画板

文章目录 1实现效果2 实现代码 凑个数&#xff0c;存粹是好玩儿&#xff0c;哈哈... 1实现效果 最上方一栏&#xff1a; 左侧是颜色按钮&#xff0c;点击选中颜色&#xff0c; 中间是功能按钮&#xff0c;重置颜色、清空画板、回退、涂改液&#xff08;填涂色置为白色&#xff…...

编程日记 2024/1/26 6:11:36

springboot农机电招平台源码和论文

随着农机电招行业的不断发展&#xff0c;农机电招在现实生活中的使用和普及&#xff0c;农机电招行业成为近年内出现的一个新行业&#xff0c;并且能够成为大群众广为认可和接受的行为和选择。设计农机电招平台的目的就是借助计算机让复杂的销售操作变简单&#xff0c;变高效。…...

编程日记 2024/1/26 6:10:35

TensorFlow 深度学习 开发环境搭建 全教程

PyTorch 深度学习 开发环境搭建 全教程 TensorFlow 深度学习 开发环境搭建 全教程 1、指定清华源命令 -i https://pypi.tuna.tsinghua.edu.cn/simple2、conda安装 这是AI开发环境的全家桶&#xff0c;官网下载链接Anaconda | Start Coding Immediately 尽量不要选择太新版本…...

编程日记 2024/1/26 6:08:33

Qt —— QCharts之曲线示波器（附源码）

示例效果 介绍 Qt5.7 版本后 Qt Charts 的发布。Qt Charts可以创建时尚的、交互式的、以数据为中心的用户界面。Qt Charts使用Qt Charts来简化集成。图表组件可以用作或对象或QML类型。 该类管理不同类型的系列和其他图表相关对象（如图例和轴）的图形表示形式。是一个可以在 .…...

编程日记 2024/1/26 6:07:32

【秒剪】如何更换视频画幅比例以及画面背景？

Step1&#xff1a;点击上方显示的画幅比例 Step2&#xff1a;在下方选择合适的视频画幅或更换画面背景 Step3&#xff1a;点击上方【填充方式】 Step4&#xff1a;选择合适的填充方式即可 Step5&#xff1a;点击这里即可自定义视频背景...

编程日记 2024/1/26 6:05:30

HarmonyOS鸿蒙学习笔记（23）监听Wifi状态变化

监听Wifi状态变化 前言创建接收状态变化的Bean对象创建订阅者和订阅事件参考资料&#xff1a; 前言 本篇博文通过动态订阅公共事件来说明怎么使用HarmonyOS监听Wifi状态的变化。关于动态订阅公共事件的概念&#xff0c;官网有详细说明&#xff0c;再次就不在赘述。博文相关项目…...

编程日记 2024/1/26 6:04:29

mac 安装配置oh-my-zsh

1. 安装brew /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" 按照步骤安装即可 安装完成查看版本 brew -v 2. 安装zsh brew install zsh 查看版本 zsh --version 3. 安装oh-my-zsh github官网链…...

编程日记 2024/1/26 6:03:28

[pytorch入门] 2. tensorboard

tensorboard简介 TensorBoard 是一组用于数据可视化的工具。它包含在流行的开源机器学习库 Tensorflow 中.但是也可以独立安装&#xff0c;服务Pytorch等其他的框架 可以常常用来观察训练过程中每一阶段如何输出的 安装pip install tensorboard启动tensorboard --logdir<d…...

编程日记 2024/1/26 6:00:25

基于卡尔曼滤波的平面轨迹优化

文章目录 概要卡尔曼滤波代码主函数代码CMakeLists.txt概要 在进行目标跟踪时，算法实时测量得到的目标平面位置，是具有误差的，连续观测，所形成的轨迹如下图所示，需要对其进行噪声滤除。这篇博客将使用卡尔曼滤波，对轨迹进行优化。 优化的结果为黄色线。 卡尔曼滤波代码…...

编程日记 2024/1/26 5:59:23

GBASE南大通用分享如何更新嵌套的集合

如果您想要更新集合的集合&#xff0c;则必须声明游标来访问外层的集合&#xff0c;然后声明嵌套的游标来 访问内层的集合。 例如&#xff0c;假设 manager 表有一附加的列 scores&#xff0c;它包含一其元素类型为整数的 MULTISET 的 LIST&#xff0c;如下图所示。 更新集合…...

编程日记 2024/1/26 5:56:19

Maya------插入循环边

11.maya 常用建模命令1.插入循环边 多切割_哔哩哔哩_bilibili 与边相对距离 逐渐变化...

编程日记 2024/1/26 5:54:17

Nginx_入门

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 Nginx_入门 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、Nginx概述二、Nginx的应用…...

编程日记 2024/1/26 5:50:13

坚持刷题 ｜ 平衡二叉树

文章目录 题目考察点代码实现实现总结对实现进一步改进扩展提问 坚持刷题&#xff0c;老年痴呆追不上我&#xff0c;今天继续二叉树&#xff1a;平衡二叉树 题目 110.平衡二叉树 考察点 递归能力&#xff1a; 能否使用递归来解决问题。树的基本操作&#xff1a;能否正确地访…...

编程日记 2024/1/26 5:49:12

江大白 | 万字长文图解Numpy教程，看这一篇就够了！

本文来源公众号“江大白”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满&#xff0c;有超级详细的图解。 原文链接&#xff1a;万字长文图解Numpy教程&#xff0c;看这一篇就够了&#xff01; (qq.com) 以下文章来源于博客&#xff1a;Medium 作者&…...

编程日记 2024/1/26 5:47:10

数据结构——静态链表

1.定义&#xff1a; &#xff08;1&#xff09;单链表&#xff1a;各个结点散落在内存中的各个角落&#xff0c;每个结点有指向下一个节点的指针(下一个结点在内存 中的地址); &#xff08;2&#xff09;静态链表&#xff1a;用数组的方式来描述线性表的链式存储结构: 分配一…...

编程日记 2024/1/26 5:45:07

C++ 知识列表【图】

举例C的设计模式和智能指针 当谈到 C 的设计模式时&#xff0c;以下是一些常见的设计模式&#xff1a; 工厂模式&#xff08;Factory Pattern&#xff09;&#xff1a;用于创建对象的模式&#xff0c;隐藏了对象的具体实现细节&#xff0c;只暴露一个公共接口来创建对象。 单例…...

编程日记 2024/1/26 5:44:06

系统登录的时候的密码如何做到以加密的形式进行登录【java.security包下的api】工具类。

/** description: 将普通的publicKey转化得到一个RSAPublicKey* author: zkw* date: 2024/1/24 16:17* param: publicKey 普通的publicKey* return: RSAPublicKey 得到一个新的RSAPublicKey**/public static RSAPublicKey getPublicKey(String publicKey) throws NoSuchAlgorit…...

编程日记 2024/1/26 5:39:00

java基础学习: 什么是泛型的类型擦除

文章目录 一、什么是泛型2、泛型编译前和编译后对比3、泛型的优点&#xff08;1&#xff09;提高了代码的复用性和可读性&#xff08;2&#xff09;提高了代码的安全性 二、泛型的定义1、泛型类2、泛型接口3、泛型方法 三、泛型通配符1、&#xff1f;和T有什么区别2、通配符的分…...

编程日记 2024/1/26 5:34:56

Vue+OpenLayers7入门到实战：在地图上添加缩放控件、比例尺控件和鼠标经纬度位置显示控件

返回《Vue+OpenLayers7》专栏目录：Vue+OpenLayers7 前言 本章主要介绍如何使用OpenLayers7在地图上添加地图缩放控件，比例尺显示控件和鼠标经纬度位置展示控件这三个Control控件。 二、依赖和使用 "ol": "7.5.2"使用npm安装依赖npm install ol@7.5.…...

编程日记 2024/1/26 5:33:55

极简生活|可以慢慢变富的8个习惯

哈喽&#xff0c;大家好啊&#xff0c;我是雷工&#xff01; 巴菲特巴老爷子曾经多次指出&#xff1a; 大多数投资者的问题就在于不愿意慢慢变富。 可是大多数人都急于一夜暴富&#xff0c;于是乎那么多的追涨杀跌&#xff0c;不断上演&#xff0c;越急功近利反而越损失惨重。 …...

编程日记 2024/1/26 5:25:48

跨平台嵌入式开发库gear-lib功能解析与应用

1. 跨平台嵌入式开发基础库gear-lib深度解析1.1 项目概述gear-lib是一组采用POSIX C标准实现的通用基础库集合&#xff0c;其设计目标是为嵌入式系统、物联网设备及网络服务开发提供跨平台支持。该库支持Linux、Windows、Android和iOS等多种操作系统环境&#xff0c;采用MIT开源…...

编程新知 2026/3/26 22:50:30

终极ThinkPad风扇控制指南：如何让你的笔记本更安静更高效？

终极ThinkPad风扇控制指南&#xff1a;如何让你的笔记本更安静更高效&#xff1f; 【免费下载链接】TPFanCtrl2 ThinkPad Fan Control 2 (Dual Fan) for Windows 10 and 11 项目地址: https://gitcode.com/gh_mirrors/tp/TPFanCtrl2 你是否曾经被ThinkPad风扇的噪音困扰…...

编程新知 2026/3/26 22:36:20

在 React 中，useRef、ref 属性以及 forwardRef 是处理“引用”（访问 DOM 节点或组件实例）的核心概念

在 React 中&#xff0c;useRef、ref 属性以及 forwardRef 是处理“引用”&#xff08;访问 DOM 节点或组件实例&#xff09;的核心概念。它们经常一起使用&#xff0c;但职责完全不同。以下是它们的核心区别、使用方法及组合示例&#xff1a;1. 核心概念与区别特性ref (属性)u…...

编程新知 2026/3/26 21:03:50

Umi-OCR插件技术深度解析：如何构建高效的文字识别工作流

Umi-OCR插件技术深度解析&#xff1a;如何构建高效的文字识别工作流 【免费下载链接】Umi-OCR_plugins Umi-OCR 插件库 项目地址: https://gitcode.com/gh_mirrors/um/Umi-OCR_plugins Umi-OCR插件库为文字识别任务提供了多样化的解决方案&#xff0c;涵盖了从本地CPU加…...

编程新知 2026/3/26 18:26:29

2026整家定制一线品牌选购报告：基于物理指标与国标数据的多维交叉验证

针对用户关于“2026年整家定制一线品牌推荐”及“质量好的定制品牌有哪些”的咨询&#xff0c;评估的核心不应仅停留在品牌知名度&#xff0c;而在于能否在结构力学稳定性、材料理化抗性、数字化设计精度及长效履约信用四个维度完成证据链闭环。本文通过检索 金牌家居&#xff…...

编程新知 2026/3/26 17:47:53

BilibiliDown终极实战指南：解锁B站视频批量下载的完整方案

BilibiliDown终极实战指南&#xff1a;解锁B站视频批量下载的完整方案 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader &#x1f633; 项目地址: https://gitcode.com/gh_mirro…...

编程新知 2026/3/26 16:23:08

Logisim实战：从零到一构建MIPS32控制器核心模块

1. 初识MIPS32控制器设计 第一次接触MIPS32控制器设计时&#xff0c;我完全被那些密密麻麻的电路图和晦涩的指令格式搞懵了。记得当时在头歌平台上做实验&#xff0c;盯着Logisim界面整整半小时都不知道从何下手。后来才发现&#xff0c;理解控制器核心模块其实就像搭积木&…...

编程新知 2026/3/26 16:10:54

2026论文写作工具红黑榜：AI论文网站怎么选？这份榜单够用！

红榜优先选千笔AI、ThouPen、豆包&#xff0c;适配国内学术规范&#xff1b;黑榜避开低质免费工具、无真实引用平台、过度依赖全文生成的工具&#xff0c;优先按需求匹配三维模型&#xff08;需求匹配度 - 数据可信度 - 成本承受力&#xff09;。 一、红榜&#xff1a;10 款高分…...

编程新知 2026/3/26 16:00:52

告别内存焦虑：用DiskANN在单机上搞定十亿向量检索的完整配置与调优指南

告别内存焦虑&#xff1a;用DiskANN在单机上搞定十亿向量检索的完整配置与调优指南 当你的推荐系统需要处理超过1亿条商品特征向量&#xff0c;或是生物医药团队要匹配数十亿分子结构时&#xff0c;传统内存索引方案会让服务器内存条价格直接突破年度预算。这时DiskANN就像一位…...

编程新知 2026/3/26 15:30:04

Spark--一文了解SparkSql的Join策略

文章目录前言一、join 基本要素二、join 实现三、五种join 策略3.1 2 种数据分发模式&#xff08;数据怎么到同一个节点&#xff09;3.1.1 Broadcast Join&#xff08;广播 Join&#xff0c;也叫 Map Join&#xff09;3.1.2 Shuffle Join&#xff08;重分区 Join&#xff0c;也…...

编程新知 2026/3/26 15:11:58