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

js实现填涂画板

news 2025/12/17 13:00:37

文章目录

  • 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

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

编程新知 2025/12/10 15:30:40

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2025/12/8 14:49:41

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

编程新知 2025/12/10 6:23:14

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2025/12/12 20:29:11

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

编程新知 2025/11/28 5:32:31

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

编程新知 2025/12/13 8:01:57

WebRTC从入门到实践 - 零基础教程

WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC&#xff1f; WebRTC&#xff08;Web Real-Time Communication&#xff09;是一个支持网页浏览器进行实时语音…...

编程新知 2025/8/9 9:56:56

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

编程新知 2025/12/10 23:26:48

鸿蒙（HarmonyOS5）实现跳一跳小游戏

下面我将介绍如何使用鸿蒙的ArkUI框架&#xff0c;实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...

编程新知 2025/11/20 18:21:59

数据结构第5章：树和二叉树完全指南（自整理详细图文笔记）

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 原创笔记&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 上一篇&#xff1a;《数据结构第4章 数组和广义表》…...

编程新知 2025/12/16 20:16:35