初学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部分,使用事件监听器来响应鼠标按下、移动和释放的事件。当鼠标按下时,开始绘制路径;当鼠标移动时,继续绘制路径;当鼠标释放或离开画板时,停止绘制路径。使用 offsetXoffsetY 属性获取鼠标相对于画板的位置,并使用 context.beginPath()context.lineTo() 方法来绘制路径。

通过以上代码,可以在浏览器中运行,看到一个简易的在线画板。可以点击并拖动鼠标来自由绘制线条。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/31849.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Nginx】静态资源部署、反向代理、负载均衡

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ nginx静态资源部署、反向代理、负载均衡 &…

vue3 provide inject实现强制刷新

1、在 App.vue 文件里写入 provide 的方法 <template> <div id"app"><keep-alive> <router-view v-if"isRouterAlive"></router-view></keep-alive> </div> </template> <script> export default …

详细教程:如何搭建废品回收小程序

废品回收是一项环保举措&#xff0c;通过回收和再利用废弃物品&#xff0c;可以减少资源浪费和环境污染。近年来&#xff0c;随着智能手机的普及&#xff0c;小程序成为了推广和运营的重要工具。本文将详细介绍如何搭建一个废品回收小程序。 1. 进入乔拓云网后台 首先&#xf…

微信朋友圈置顶功能已大范围上线!

微信是目前全球最受欢迎的社交媒体应用之一&#xff0c;拥有数十亿的用户。作为一款持续发展和改进的应用&#xff0c;微信不断推出新的功能来提升用户体验。 近日&#xff0c;iOS微信8.0.41内测版迎来了更新&#xff0c;本次更新距离上个正式版间隔了大概10天的时间。 微信朋友…

Agents改变游戏规则,亚马逊云科技生成式AI让基础模型加速工作流

最近&#xff0c;Stability AI正式发布了下一代文生图模型——Stable Diffusion XL 1.0这次的1.0版本是Stability AI的旗舰版生图模型&#xff0c;也是最先进的开源生图模型。 在目前的开放式图像模型中&#xff0c;SDXL 1.0是参数数量最多的。官方表示&#xff0c;这次采用的…

SpringBoot源码分析(8)--内置ApplicationContextInitializer

文章目录 1、DelegatingApplicationContextInitializer2、SharedMetadataReaderFactoryContextInitializer3、ContextIdApplicationContextInitializer4、ConfigurationWarningsApplicationContextInitializer5、ServerPortInfoApplicationContextInitializer6、ConditionEvalu…

一行JS代码导出ant-design中复杂table表格的Excel

使用方式 1、安装依赖 npm install xlsx-js-style2、复制代码文件exportExcel.js至工程 https://github.com/EnthuDai/export-excel-in-one-line 3、在引入excel.js后调用 Excel.export(columns, dataSource, 导出文件名)4、代码demo 5、效果 页面excel 适用范围 对于使…

16bit、8 通道、500kSPS、 SAR 型 ADC——MS5188N

MS5188N 是 8 通道、 16bit 、电荷再分配逐次逼近型模数 转换器&#xff0c;采用单电源供电。 MS5188N 拥有多通道、低功耗数据采集系统所需的所有 组成部分&#xff0c;包括&#xff1a;无失码的真 16 位 SAR ADC &#xff1b;用于将输入配 置为单端输入&#xff0…

Spring IoC 详解

目录 一、引言二、Spring Bean三、将一个类声明为 Bean 所涉及的注解四、Component 和 Bean 的区别五、注入 Bean 的注解六、Autowired 和 Resource 的区别七、Bean7.1 作用域7.2 线程安全7.3 生命周期 一、引言 IoC&#xff08;Inversion of Control:控制反转&#xff09; 是…

【AndV】ant-design-vue中select使用mode=“combobox“无效:

文章目录 一、问题:二、解决: 一、问题: Warning: [antdv: Select] The combobox mode of Select is deprecated,it will be removed in next major version,please use AutoComplete instead 二、解决: 将mode"combobox"改为mode"SECRET_COMBOBOX_MODE_DO_NOT_…

Centos7.9_或者华为OpenEuler安装Mysql8.0.33安装_亲测成功---Linux工作笔记061

[root@host-10-233-255-199 soft]# ll 总用量 1.1G -rw-r--r-- 1 root root 137M 5月 10 15:20 jdk-8u271-linux-x64.tar.gz -rw-r--r-- 1 root root 925M 7月 6 09:02 mysql-8.0.33-el7-x86_64.tar 看一下我们的安装包. [root@host-10-233-255-199 soft]# rpm -qa|grep m…

机器学习深度学习——注意力提示、注意力池化(核回归)

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——常见循环神经网络结构&#xff08;RNN、LSTM、GRU&#xff09; &#x1f4da;订阅专栏&#xff1a;机器…

外网通过ipv6访问家里设备

目录 1.需要整体理解如何在外网连接家里设备。 2.路由器打通ipv6。 3.移动光猫配置ipv6。 4.test-ipv6.com测试成功&#xff0c;但是ping不通 还是ping不通&#xff0c;提出如下可能 5.动态域名解析&#xff08;ddns-go&#xff09; a.dns服务商权限设置 b.IPv6设置 c…

一文读懂ThreadLocal

ThreadLocal 有什么用&#xff1f; 目录 ThreadLocal 有什么用&#xff1f; 如何使用 ThreadLocal&#xff1f; ThreadLocal 原理了解吗&#xff1f; ThreadLocal 有什么用&#xff1f; 通常情况下&#xff0c;我们创建的变量是可以被任何一个线程访问并修改的。如果想实现…

rv1126设置静态ip

开发板配网--------------------------------------------------------------------------------------------- 刚拿到的开发板里面的网络配置大多不可用&#xff0c;此时是无法ping通的&#xff0c;这个时候需要重新修改相关的配置文件&#xff1b; Vi /etc/profile 最后面…

竞赛项目 深度学习图像风格迁移

文章目录 0 前言1 VGG网络2 风格迁移3 内容损失4 风格损失5 主代码实现6 迁移模型实现7 效果展示8 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习图像风格迁移 - opencv python 该项目较为新颖&#xff0c;适合作为竞赛课题…

Qt 多线程、信号和槽连接方式推荐connect(Sender,Singnal,Receiver,Slot,ConnectMode);如下图所示

connect&#xff08;主线程A&#xff0c;信号A,子线程B,槽函数B,DirectConnection /AutoConnection ); connect&#xff08;子线B,信号B,主线程A,槽函数A,QueueConnection );

FIPS 180-2 散列算法SHA-224、SHA-256、SHA-384 和 SHA-512 的C语言快速软件实施:理论与实践

一、安全散列算法(SHA)简介 安全散列算法(Secure Hash Algorithm,简称SHA)是美国国家安全局(NSA)研发的一种密码散列函数算法标准,由美国国家标准与技术研究院(NIST)认证[3]。SHA系列算法包括SHA-1、SHA-224、SHA-256、SHA-384 和SHA-512 等变体[1]。在本文中,我们…

无涯教程-Perl - grep函数

描述 此函数从LIST中提取EXPR为TRUE的所有元素。 语法 以下是此函数的简单语法- grep EXPR, LIST返回值 此函数返回在标量context中表达式返回true的次数以及在列表context中与表达式匹配的元素列表。 例 以下是显示其基本用法的示例代码- #!/usr/bin/perllist (1,&qu…

什么是Java中的策略模式?

Java中的策略模式是一种行为设计模式&#xff0c;它允许您在不改变客户端代码的情况下&#xff0c;在运行时动态地切换行为。这是一种非常有用的模式&#xff0c;因为它允许您在运行时根据需要更改算法或行为。 策略模式通常涉及到一个或多个策略类&#xff0c;每个策略类都实…