初学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解析…...
学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码，专为学校招生场景量身打造，功能实用且操作便捷。 从技术架构来看，ThinkPHP提供稳定可靠的后台服务，FastAdmin加速开发流程，UniApp则保障小程序在多端有良好的兼…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况，可以通过以下几种方式模拟或触发： 1. 增加CPU负载 运行大量计算密集型任务，例如： 使用多线程循环执行复杂计算（如数学运算、加密解密等）。运行图…...
精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南
精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南 在数字化营销时代，邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天，我们将深入解析邮件打开率、网站可用性、页面参与时…...
Mac下Android Studio扫描根目录卡死问题记录
环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中，提示一个依赖外部头文件的cpp源文件需要同步，点…...
python执行测试用例，allure报乱码且未成功生成报告
allure执行测试用例时显示乱码：‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...
Go 语言并发编程基础：无缓冲与有缓冲通道
在上一章节中，我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道，它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好࿰…...
tomcat指定使用的jdk版本
说明 有时候需要对tomcat配置指定的jdk版本号，此时，我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...
LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别（二）
在上一篇文章中，我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调，以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后，如何调用这个模型进行人脸情感识别的具体代码实现，包括详细的步骤和注释。 模型调用步骤 环境准备：确保安装了必要的Python库。…...
Spring Boot + MyBatis 集成支付宝支付流程
Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例（电脑网站支付） 1. 添加依赖 <!…...
uni-app学习笔记三十五--扩展组件的安装和使用
由于内置组件不能满足日常开发需要，uniapp官方也提供了众多的扩展组件供我们使用。由于不是内置组件，需要安装才能使用。 一、安装扩展插件 安装方法： 1.访问uniapp官方文档组件部分：组件使用的入门教程 | uni-app官网 点击左侧…...