初学HTML：在线简易画板设计。
最近在HTML，记录下一点点成果。 设计了一个简易画板，通过HTML的Canvas元素实现一个在线画板，用户可以在上面绘制图形或涂鸦。
下面是运行效果：
下面是代码：
<!DOCTYPE html>
<html>
<head><title>绘图板</title><style>#drawing-board {border: 1px solid black;}</style>
</head>
<body><h1>绘图板</h1><canvas id="drawing-board" width="800" height="600"></canvas><script>document.addEventListener("DOMContentLoaded", function(event) {var drawingBoard = document.getElementById("drawing-board");var context = drawingBoard.getContext("2d");var isDrawing = false;var lastX = 0;var lastY = 0;drawingBoard.addEventListener("mousedown", startDrawing);drawingBoard.addEventListener("mousemove", draw);drawingBoard.addEventListener("mouseup", stopDrawing);drawingBoard.addEventListener("mouseout", stopDrawing);function startDrawing(event) {isDrawing = true;[lastX, lastY] = [event.offsetX, event.offsetY];}function draw(event) {if (!isDrawing) return;context.beginPath();context.moveTo(lastX, lastY);context.lineTo(event.offsetX, event.offsetY);context.stroke();[lastX, lastY] = [event.offsetX, event.offsetY];}function stopDrawing() {isDrawing = false;}});</script>
</body>
</html>
这段代码会在浏览器中创建一个标题为"绘图板"的页面。页面顶部有一个 <h1> 元素，用于显示标题。画板使用 <canvas> 元素创建，并在CSS中定义了边框样式。
在JavaScript部分，使用事件监听器来响应鼠标按下、移动和释放的事件。当鼠标按下时，开始绘制路径；当鼠标移动时，继续绘制路径；当鼠标释放或离开画板时，停止绘制路径。使用 offsetX 和 offsetY 属性获取鼠标相对于画板的位置，并使用 context.beginPath() 和 context.lineTo() 方法来绘制路径。
通过以上代码，可以在浏览器中运行，看到一个简易的在线画板。可以点击并拖动鼠标来自由绘制线条。
相关文章：
初学HTML：在线简易画板设计。
最近在HTML，记录下一点点成果。 设计了一个简易画板，通过HTML的Canvas元素实现一个在线画板，用户可以在上面绘制图形或涂鸦。 下面是运行效果： 下面是代码： <!DOCTYPE html> <html> <head><ti…...
IDEA项目实践——Spring框架简介，以及IOC注解
系列文章目录 IDEA创建项目的操作步骤以及在虚拟机里面创建Scala的项目简单介绍 IDEA项目实践——创建Java项目以及创建Maven项目案例、使用数据库连接池创建项目简介 IDEWA项目实践——mybatis的一些基本原理以及案例 IDEA项目实践——动态SQL、关系映射、注解开发 文章目…...
Scala（第一章Scala入门）
文章目录 1.1 概述 1.1.1 为什么学习Scala1.1.2 Scala发展历史1.1.3 Scala和Java关系1.1.4 Scala语言特点 1.2 Scala环境搭建1.3 Scala插件安装1.4 HelloWorld案例 1.4.1 创建IDEA项目工程1.4.2 class和object说明1.4.3 Scala程序反编译 1.5 关联Scala源码1.6官方编程指南 1.1…...
Linux tcpdump 命令详解
简介 用简单的话来定义tcpdump，就是：dump the traffic on a network，根据使用者的定义对网络上的数据包进行截获的包分析工具。 tcpdump可以将网络中传送的数据包的“头”完全截获下来提供分析。它支持针对网络层、协议、主机、网络或端口的…...
试卷擦除答案的工具，几个步骤轻松搞定
在学生的学习生活中，考试是必不可少的一部分。然而，有时候我们在做完试卷后发现自己填错了答案，或者想要更改答案，但是试卷上已经有了痕迹。这时候，我们就需要一些工具来擦除答案。以下是几个简单的步骤，让…...
vue3部署宝塔后请求接口404以及刷新页面404的问题解决方案
技术：vue3.2.13 UI框架:element-plus 2.1.1 服务器：腾讯云Centos系统宝塔面板 Nginx:1.22.1 前提：宝塔面板》网站PHP项目 已经新建了项目 1.处理vue页面刷新报错404 如上图，在PHP网站》设置》配置文件，新增如下代码…...
java.sql.Date java.util.Date
文章目录 两者关系两者在时间显示上区别 两者关系 sql包中Date是util包子类 public class Date extends java.util.Date 两者在时间显示上区别 /*** 解决sql包中日期和util包日期转换问题*/Testpublic void t3(){Date utilDate new Date();java.sql.Date sqlDate new java.…...
斗象科技-2023攻防演练必修高危漏洞集合百度网盘下载（2版本）
下载地址见最下端： 高危风险漏洞一直是企业网络安全防护的薄弱点，也成为 HW 攻防演练期间红队的重要突破口;每年HW 期间爆发了大量的高危风险漏洞成为红队突破网络边界防护的一把利器，很多企业因为这些高危漏洞而导致整个防御体系被突破甚至靶…...
分布式数据库视角下的存储过程
存储过程很好呀，那些用不好的人就是自己水平烂，不接受反驳！我就有过这样念头，但分布式数据库，更倾向少用或不用存储过程。 1 我从C/S时代走来 C/S架构时代的末期最流行开发套件是PowerBuilder和Sybase数据库…...
深度学习常用的激活函数
深度学习的核心思想是通过多层次的神经网络结构，逐步抽取和表示数据中的高级特征，从而实现对复杂数据模式的学习和识别。 神经网络结构： 深度学习使用多层次的神经网络，包括输入层、隐藏层和输出层。这些网络结构允许模型自动学习…...
深度学习之用PyTorch实现逻辑回归
0.1 学习视频源于：b站：刘二大人《PyTorch深度学习实践》 0.2 本章内容为自主学习总结内容，若有错误欢迎指正！ 代码（类比线性回归）： # 调用库 import torch import torch.nn.functional as F#…...
04-4_Qt 5.9 C++开发指南_时间日期与定时器
文章目录 1. 时间日期相关的类2. 源码2.1 可视化UI设计2.2 dialog.h2.3 dialog.cpp 1. 时间日期相关的类 时间日期是经常遇到的数据类型，Qt 中时间日期类型的类如下。 QTime:时间数据类型，仅表示时间，如 15:23:13。 QDate:日期数据类型&…...
7个顶级开源数据集来训练自然语言处理（NLP）和文本模型
推荐：使用 NSDT场景编辑器快速助你搭建可二次编辑的3D应用场景 NLP现在是一个令人兴奋的领域，特别是在像AutoNLP这样的用例中，但很难掌握。开始使用NLP的主要问题是缺乏适当的指导和该领域的过度广度。很容易迷失在各种论文和代码中ÿ…...
GitHub上受欢迎的Android UI Library
内容 抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新ViewPager图表(Chart)菜单(Menu)浮动菜单对话框空白页滑动删除手势操作RecyclerViewCardColorDrawableSpinner布局模糊效果TabBarAppBar选择器(Picker)跑马灯日历时间主题样式ImageView通知聊…...
cpm log2((cpm/10) + 1) nmf 1e6 1e5
Gene expression units explained: RPM, RPKM, FPKM, TPM, DESeq, TMM, SCnorm, GeTMM, and ComBat-Seq Read count、CPM、 RPKM、FPKM和TPM的区别 - 简书 (jianshu.com) http://zyxue.github.io/2017/06/02/understanding-TCGA-mRNA-Level3-analysis-results-files-from-fir…...
竞赛项目 深度学习的视频多目标跟踪实现
文章目录 1 前言2 先上成果3 多目标跟踪的两种方法3.1 方法13.2 方法2 4 Tracking By Detecting的跟踪过程4.1 存在的问题4.2 基于轨迹预测的跟踪方式 5 训练代码6 最后 1 前言 🔥 优质竞赛项目系列，今天要分享的是 基于深度学习的视频多目标跟踪实现 …...
如何避免用waveformRecord复制数组
这里描述如何使用数组字段内存管理特定。这使得数组数据能够被移入和移出waveform，aai和aao类型的值字段(BPTR)。 使用这种特定包括用另一个(用户分配的)字段替代存储在BPTR字段的指针。基本规则是： 1、BPTR以及它当前指向的内存，只能在这个…...
RocketMQ 延迟消息
RocketMQ 延迟消息 RocketMQ 消费者启动流程 什么是延迟消息 RocketMQ 延迟消息是指，生产者发送消息给消费者消息，消费者需要等待一段时间后才能消费到。 使用场景 用户下单之后，15分钟未支付，对支付账单进行提醒或者关单处理…...
Dex文件混淆(一)：BlackObfuscator
Dex文件混淆(一)：BlackObfuscator 首发地址:http://zhuoyue360.com/crack/105.html 文章目录 Dex文件混淆(一)：BlackObfuscator1. 前言2.小试牛刀3. 参考学习1. dex2jar源码简析2. BlackObfuscator简析1. 控制流平坦化1. 控制流平坦化基本介绍 2. Dex解析…...
HTML 列表、表格、表单
1 列表标签 作用：布局内容排列整齐的区域 列表分类：无序列表、有序列表、定义列表。 例如： 1.1 无序列表 标签：ul 嵌套 li，ul是无序列表，li是列表条目。 注意事项： ul 标签里面只能包裹 li…...
对WWDC 2025 Keynote 内容的预测
借助我们以往对苹果公司发展路径的深入研究经验，以及大语言模型的分析能力，我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际，我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测，聊作存档。等到明…...
听写流程自动化实践，轻量级教育辅助
随着智能教育工具的发展，越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式，也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建，…...
站群服务器的应用场景都有哪些？
站群服务器主要是为了多个网站的托管和管理所设计的，可以通过集中管理和高效资源的分配，来支持多个独立的网站同时运行，让每一个网站都可以分配到独立的IP地址，避免出现IP关联的风险，用户还可以通过控制面板进行管理功…...
Web中间件--tomcat学习
Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机，它可以执行Java字节码。Java虚拟机是Java平台的一部分，Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...
探索Selenium：自动化测试的神奇钥匙
目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...
spring boot使用HttpServletResponse实现sse后端流式输出消息
1.以前只是看过SSE的相关文章，没有具体实践，这次接入AI大模型使用到了流式输出，涉及到给前端流式返回，所以记录一下。 2.resp要设置为text/event-stream resp.setContentType("text/event-stream"); resp.setCharacter…...
AWSLambda之设置时区
目标 希望Lambda运行的时区是东八区。 解决 只需要设置lambda的环境变量TZ为东八区时区即可，即Asia/Shanghai。 参考 使用 Lambda 环境变量...
[C++错误经验]case语句跳过变量初始化
标题：[C错误经验]case语句跳过变量初始化 水墨不写bug 文章目录 一、错误信息复现二、错误分析三、解决方法 一、错误信息复现 write.cc:80:14: error: jump to case label80 | case 2:| ^ write.cc:76:20: note: crosses initialization…...
信息系统分析与设计复习
2024试卷 单选题（20） 1、在一个聊天系统(类似ChatGPT)中，属于控制类的是（）。 A. 话语者类 B.聊天文字输入界面类 C. 聊天主题辨别类 D. 聊天历史类 解析 B-C-E备选架构中分析类分为边界类、控制类和实体类。 边界…...