初学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解析…...
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造，完美适配AGV和无人叉车。同时，集成以太网与语音合成技术，为各类高级系统（如MES、调度系统、库位管理、立库等）提供高效便捷的语音交互体验。 L…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞！！！ 抽象 现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...
React19源码系列之 事件插件系统
事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...
python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）
更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口（适配服务端返回 Token） export const login async (code, avatar) > {const res await http…...
04-初识css
一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...
网络编程（UDP编程）
思维导图 UDP基础编程（单播） 1.流程图 服务器：短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章，二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑： 🔄 一、起源与初创期：Swagger的诞生（2010-2014） 核心…...
安卓基础（aar）
重新设置java21的环境，临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的： MyApp/ ├── app/ …...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ；并安装。 基础操作不再赘述。 打开 macOS 终端，开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...