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

js实现填涂画板

news 2026/5/13 4:17:13

文章目录

  • 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

大模型上下文长度对Agent的影响：从4K到1M的质变

目录大模型上下文长度对Agent的影响&#xff1a;从4K到1M的质变引言&#xff1a;工作台革命一、上下文窗口演进史&#xff1a;从4K到1M的百倍跃迁1.1 时间线上的技术里程碑1.2 为什么2025年成为“百万Token元年”&#xff1f;二、长上下文的质变&#xff1a;Agent能力的三重跃迁…...

编程新知 2026/5/13 4:03:55

开源项目本地化实战：从Presentify翻译项目看国际化协作

1. 项目概述&#xff1a;一个被忽视的开源宝藏如果你是一个经常需要做演示、录屏或者线上教学的开发者、讲师或者知识分享者&#xff0c;那你一定遇到过这个痛点&#xff1a;如何在屏幕上清晰地标注你的鼠标点击、按键操作&#xff0c;让观众能毫不费力地跟上你的思路&#xff…...

编程新知 2026/5/13 2:28:00

互联网大厂 Java 求职面试技巧揭秘

互联网大厂 Java 求职面试技巧揭秘 在当今互联网大厂求职面试中&#xff0c;技术与场景的交汇点常常成为面试官考察的重点。本文将通过一位搞笑的程序员燕双非与严肃的面试官的对话&#xff0c;展示 Java 技术栈下的面试问题&#xff0c;并深入解答其中的技术要点。第一轮面试 …...

编程新知 2026/5/13 2:25:43

从零粉丝到行业KOL，ChatGPT驱动的LinkedIn内容矩阵搭建全链路，含17个已验证Prompt模板+3类避坑清单

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;从零粉丝到行业KOL的底层认知跃迁 成为技术领域有影响力的声音&#xff0c;从来不是靠日更三篇“速成教程”&#xff0c;而是源于对价值创造逻辑的重构。当多数人还在纠结“选什么平台”“起什么昵称”…...

编程新知 2026/5/13 2:23:34

多品牌技高速存储卡术拆解分析实测：如何同时满足企业级监控与创作两不误？

一、开篇&#xff1a;当监控连续记录与影视创作相遇——存储卡的双重使命在企业级安防监控与专业影像创作的交汇点上&#xff0c;存储卡不再仅仅是数据的载体&#xff0c;而是工作流中不可绕过的风险控制节点。安防监控要求724小时不间断写入&#xff0c;对持续写入稳定性和数据…...

编程新知 2026/5/13 1:50:30

Arm DDT：高性能计算并行程序调试利器

1. Arm DDT调试工具概述Arm DDT&#xff08;Distributed Debugging Tool&#xff09;是Arm公司开发的一款专业级并行程序调试工具&#xff0c;专为高性能计算&#xff08;HPC&#xff09;领域设计。作为Arm Forge工具套件的重要组成部分&#xff0c;DDT提供了强大的MPI程序调试…...

编程新知 2026/5/13 1:37:25

中国半导体产业崛起：资本驱动下的存储器攻坚与全产业链布局

1. 行业格局的十字路口&#xff1a;当西方整合遇上东方崛起最近几年&#xff0c;半导体行业的头条新闻几乎被一系列重磅并购案所占据&#xff1a;恩智浦收购飞思卡尔、安华高并购博通、英特尔鲸吞阿尔特拉。这些动辄数百亿美元的巨无霸交易&#xff0c;背后传递出一个清晰的信号…...

编程新知 2026/5/13 0:49:00

Windows安卓开发环境一键配置：告别繁琐驱动的终极解决方案

Windows安卓开发环境一键配置&#xff1a;告别繁琐驱动的终极解决方案 【免费下载链接】Latest-adb-fastboot-installer-for-windows A Simple Android Driver installer tool for windows (Always installs the latest version) 项目地址: https://gitcode.com/gh_mirrors/l…...

编程新知 2026/5/13 0:26:23

Python 爬虫数据处理：特殊格式文档爬虫解析处理

前言 在 Python 爬虫规模化采集业务中&#xff0c;除常规 HTML 网页与 JSON 接口数据外&#xff0c;经常会遇到各类非网页型特殊格式文档资源&#xff0c;常见包含 PDF、Word、Excel、CSV、TXT、压缩包内嵌文档、Base64 加密文档、富文本混合格式文档等。这类文档无法通过常规…...

编程新知 2026/5/13 0:20:18

如何解锁数字化制造的数据瓶颈：stltostp的轻量级STL转STEP解决方案

如何解锁数字化制造的数据瓶颈&#xff1a;stltostp的轻量级STL转STEP解决方案 【免费下载链接】stltostp Convert stl files to STEP brep files 项目地址: https://gitcode.com/gh_mirrors/st/stltostp 在数字化制造与工业4.0转型的浪潮中&#xff0c;数据格式的互操作…...

编程新知 2026/5/13 0:16:13