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

js实现填涂画板

news 2025/7/3 5:47:19

文章目录

  • 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

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2025/6/27 7:21:30

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2025/7/2 18:06:11

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2025/6/21 16:15:28

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/6/20 15:31:23

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/6/21 10:39:11

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/6/27 6:46:09

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

编程新知 2025/6/15 23:06:39

多模态图像修复系统：基于深度学习的图片修复实现

多模态图像修复系统：基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型（Stable Diffusion Inpainting）实现图像修复功能，结合文本描述和图片输入，对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

编程新知 2025/6/20 15:07:28

什么是VR全景技术

VR全景技术&#xff0c;全称为虚拟现实全景技术&#xff0c;是通过计算机图像模拟生成三维空间中的虚拟世界&#xff0c;使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验&#xff0c;结合图文、3D、音视频等多媒体元素…...

编程新知 2025/6/21 16:33:13

十九、【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建 前言准备工作第一部分：回顾 Django 内置的 `User` 模型第二部分：设计并创建 `Role` 和 `UserProfile` 模型第三部分：创建 Serializers第四部分：创建 ViewSets第五部分：注册 API 路由第六部分：后端初步测…...

编程新知 2025/6/21 11:15:11