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

初学HTML：在线简易画板设计。

news 2026/2/10 13:06:15

最近在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&#xff0c;记录下一点点成果。 设计了一个简易画板&#xff0c;通过HTML的Canvas元素实现一个在线画板&#xff0c;用户可以在上面绘制图形或涂鸦。 下面是运行效果&#xff1a; 下面是代码&#xff1a; <!DOCTYPE html> <html> <head><ti…...

编程日记 2023/8/11 15:34:09

IDEA项目实践——Spring框架简介，以及IOC注解

系列文章目录 IDEA创建项目的操作步骤以及在虚拟机里面创建Scala的项目简单介绍 IDEA项目实践——创建Java项目以及创建Maven项目案例、使用数据库连接池创建项目简介 IDEWA项目实践——mybatis的一些基本原理以及案例 IDEA项目实践——动态SQL、关系映射、注解开发 文章目…...

编程日记 2023/8/11 15:33:07

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…...

编程日记 2023/8/11 15:32:06

Linux tcpdump 命令详解

简介 用简单的话来定义tcpdump&#xff0c;就是&#xff1a;dump the traffic on a network&#xff0c;根据使用者的定义对网络上的数据包进行截获的包分析工具。 tcpdump可以将网络中传送的数据包的“头”完全截获下来提供分析。它支持针对网络层、协议、主机、网络或端口的…...

编程日记 2023/8/11 15:31:03

试卷擦除答案的工具，几个步骤轻松搞定

在学生的学习生活中&#xff0c;考试是必不可少的一部分。然而&#xff0c;有时候我们在做完试卷后发现自己填错了答案&#xff0c;或者想要更改答案&#xff0c;但是试卷上已经有了痕迹。这时候&#xff0c;我们就需要一些工具来擦除答案。以下是几个简单的步骤&#xff0c;让…...

编程日记 2023/8/11 15:30:00

vue3部署宝塔后请求接口404以及刷新页面404的问题解决方案

技术&#xff1a;vue3.2.13 UI框架:element-plus 2.1.1 服务器&#xff1a;腾讯云Centos系统宝塔面板 Nginx:1.22.1 前提&#xff1a;宝塔面板》网站PHP项目 已经新建了项目 1.处理vue页面刷新报错404 如上图&#xff0c;在PHP网站》设置》配置文件&#xff0c;新增如下代码…...

编程日记 2023/8/11 15:28:57

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/8/11 15:27:56

斗象科技-2023攻防演练必修高危漏洞集合百度网盘下载（2版本）

下载地址见最下端&#xff1a; 高危风险漏洞一直是企业网络安全防护的薄弱点&#xff0c;也成为 HW 攻防演练期间红队的重要突破口;每年HW 期间爆发了大量的高危风险漏洞成为红队突破网络边界防护的一把利器&#xff0c;很多企业因为这些高危漏洞而导致整个防御体系被突破甚至靶…...

编程日记 2023/8/11 15:26:55

分布式数据库视角下的存储过程

存储过程很好呀&#xff0c;那些用不好的人就是自己水平烂&#xff0c;不接受反驳&#xff01;我就有过这样念头&#xff0c;但分布式数据库&#xff0c;更倾向少用或不用存储过程。 1 我从C/S时代走来 C/S架构时代的末期最流行开发套件是PowerBuilder和Sybase数据库&#xf…...

编程日记 2023/8/11 15:25:53

深度学习常用的激活函数

深度学习的核心思想是通过多层次的神经网络结构&#xff0c;逐步抽取和表示数据中的高级特征&#xff0c;从而实现对复杂数据模式的学习和识别。 神经网络结构&#xff1a; 深度学习使用多层次的神经网络&#xff0c;包括输入层、隐藏层和输出层。这些网络结构允许模型自动学习…...

编程日记 2023/8/11 15:24:52

深度学习之用PyTorch实现逻辑回归

0.1 学习视频源于&#xff1a;b站&#xff1a;刘二大人《PyTorch深度学习实践》 0.2 本章内容为自主学习总结内容&#xff0c;若有错误欢迎指正&#xff01; 代码&#xff08;类比线性回归&#xff09;&#xff1a; # 调用库 import torch import torch.nn.functional as F#…...

编程日记 2023/8/11 15:23:51

04-4_Qt 5.9 C++开发指南_时间日期与定时器

文章目录 1. 时间日期相关的类2. 源码2.1 可视化UI设计2.2 dialog.h2.3 dialog.cpp 1. 时间日期相关的类 时间日期是经常遇到的数据类型&#xff0c;Qt 中时间日期类型的类如下。 QTime:时间数据类型&#xff0c;仅表示时间&#xff0c;如 15:23:13。 QDate:日期数据类型&…...

编程日记 2023/8/11 15:22:50

7个顶级开源数据集来训练自然语言处理（NLP）和文本模型

推荐&#xff1a;使用 NSDT场景编辑器快速助你搭建可二次编辑的3D应用场景 NLP现在是一个令人兴奋的领域&#xff0c;特别是在像AutoNLP这样的用例中&#xff0c;但很难掌握。开始使用NLP的主要问题是缺乏适当的指导和该领域的过度广度。很容易迷失在各种论文和代码中&#xff…...

编程日记 2023/8/11 15:21:49

计算机网络 网络层 边界网关协议BGP

...

编程日记 2023/8/11 15:20:47

GitHub上受欢迎的Android UI Library

内容 抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新ViewPager图表(Chart)菜单(Menu)浮动菜单对话框空白页滑动删除手势操作RecyclerViewCardColorDrawableSpinner布局模糊效果TabBarAppBar选择器(Picker)跑马灯日历时间主题样式ImageView通知聊…...

编程日记 2023/8/11 15:19:46

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…...

编程日记 2023/8/11 15:18:44

竞赛项目 深度学习的视频多目标跟踪实现

文章目录 1 前言2 先上成果3 多目标跟踪的两种方法3.1 方法13.2 方法2 4 Tracking By Detecting的跟踪过程4.1 存在的问题4.2 基于轨迹预测的跟踪方式 5 训练代码6 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于深度学习的视频多目标跟踪实现 …...

编程日记 2023/8/11 15:17:43

如何避免用waveformRecord复制数组

这里描述如何使用数组字段内存管理特定。这使得数组数据能够被移入和移出waveform&#xff0c;aai和aao类型的值字段(BPTR)。 使用这种特定包括用另一个(用户分配的)字段替代存储在BPTR字段的指针。基本规则是&#xff1a; 1、BPTR以及它当前指向的内存&#xff0c;只能在这个…...

编程日记 2023/8/11 15:16:41

RocketMQ 延迟消息

RocketMQ 延迟消息 RocketMQ 消费者启动流程 什么是延迟消息 RocketMQ 延迟消息是指&#xff0c;生产者发送消息给消费者消息&#xff0c;消费者需要等待一段时间后才能消费到。 使用场景 用户下单之后&#xff0c;15分钟未支付&#xff0c;对支付账单进行提醒或者关单处理…...

编程日记 2023/8/11 15:15:40

Dex文件混淆(一)：BlackObfuscator

Dex文件混淆(一)&#xff1a;BlackObfuscator 首发地址:http://zhuoyue360.com/crack/105.html 文章目录 Dex文件混淆(一)&#xff1a;BlackObfuscator1. 前言2.小试牛刀3. 参考学习1. dex2jar源码简析2. BlackObfuscator简析1. 控制流平坦化1. 控制流平坦化基本介绍 2. Dex解析…...

编程日记 2023/8/11 15:14:39

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2026/2/8 20:42:56

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2026/2/7 13:17:38

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

编程新知 2025/12/1 19:23:04

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2026/1/12 10:41:22

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

编程新知 2025/12/12 4:55:21

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2026/1/29 17:12:17

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

编程新知 2026/1/10 1:08:51

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

编程新知 2025/10/24 12:31:26

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2026/1/27 12:17:05

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2026/2/6 20:53:34