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

【第1章 基础知识】1.8 在 Canvas 中使用 HTML 元素

article 2025/6/3 2:00:09

文章目录

  • 前言
  • 示例-橡皮筋式选取框
  • 示例代码

前言

尽管我们可以说 Canvas 是 HTML5 之中最棒的功能，不过在实现网络应用程序时，很少会单独使用它。在绝大多数情况下，你都会将一个或更多的 canvas 元素与其他 HTML 控件结合起来使用，以便让用户可以通过输入数值或其他方式来控制应用程序。

要将其他 HTML 控件与 canvas 结合起来使用，首先想到的办法可能是将控件嵌入到 canvas 元素之中。不过这么多不行，因为任何放入 canvas 元素主体部分的东西，只有在浏览器不支持 canvas 元素时，才会被显示出来。

浏览器要么显示 canvas 元素，要么显示放在元素之中的 HTML 控件，它不会将两者同时显示出来。所以，必须将控件放在 canvas 元素之外。

为了让 HTML 控件看上去好像是出现在 canvas 范围内，可以使用 CSS 将这些控件放置在 canvas 之上。

示例-橡皮筋式选取框

示例采用了一种名为“橡皮筋式”（rubberbanding）选取框的技术来让用户在 canvas 之中选择某个区域。起初，该 canvas 会显示一副图像，然后当选定图像的某一部分时，应用程序会将你所选的这部分区域放大。

在这里插入图片描述
在这里插入图片描述

示例代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><title>橡皮筋选框放大器</title><style>body {background: rgba(100, 145, 250, 0.3);}#canvas {margin-left: 20px;margin-right: 0;margin-bottom: 20px;border: thin solid #aaaaaa;/*十字瞄准线*/cursor: crosshair;padding: 0;}#controls {margin: 20px 0px 20px 20px;}#rubberbandDiv {/*绝对定位，方便位置选取*/position: absolute;border: 3px solid yellow;cursor: crosshair;display: none;}</style></head><body><!--控制重置画面的按钮--><div id="controls"><input type="button" id="resetButton" value="Reset" /></div><!--橡皮筋选取狂div--><div id="rubberbandDiv"></div><canvas id="canvas" width="800" height="520">Canvas not supported</canvas><p>拖拽鼠标拉取橡皮筋，选中区域并放大</p></body><script>var canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),rubberbandDiv = document.getElementById('rubberbandDiv'),resetButton = document.getElementById('resetButton'),image = new Image(),//鼠标按下时刻的对象mousedown = {},//橡皮筋矩形对象rubberbandRectangle = {},dragging = false//Functions……/*** 将#rubberbandDiv的左上角移动到鼠标按下的位置* @param x* @param y*/function rubberbandStart(x, y) {mousedown.x = xmousedown.y = yrubberbandRectangle.left = mousedown.xrubberbandRectangle.top = mousedown.ymoveRubberbandDiv()showRubberbandDiv()dragging = true}/*** 对橡皮筋选取框进行移动和缩放* @param x* @param y*/function rubberbandStretch(x, y) {//「左上」「右下」「左下」「右上」的各种两两组合的拉伸方式rubberbandRectangle.left = x < mousedown.x ? x : mousedown.xrubberbandRectangle.top = y < mousedown.y ? y : mousedown.yrubberbandRectangle.width = Math.abs(x - mousedown.x)rubberbandRectangle.height = Math.abs(y - mousedown.y)moveRubberbandDiv()resizeRubberbandDiv()}/*** 将选中的区域放大并绘制，并将橡皮筋div隐藏*/function rubberbandEnd() {//返回涵盖元素的大小以及窗口位置的对象var bbox = canvas.getBoundingClientRect()try {//选区放大context.drawImage(canvas,rubberbandRectangle.left - bbox.left,rubberbandRectangle.top - bbox.top,rubberbandRectangle.width,rubberbandRectangle.height,0,0,canvas.width,canvas.height)} catch (e) {// suppress error message when mouse is released// outside the canvasalert('鼠标释放错误警报！')}resetRubberbandRectangle()rubberbandDiv.style.width = 0rubberbandDiv.style.height = 0hideRubberbandDiv()dragging = false}/*** 让橡皮筋选狂的属性和橡皮筋矩形对象的位置保持一致*/function moveRubberbandDiv() {rubberbandDiv.style.top = rubberbandRectangle.top + 'px'rubberbandDiv.style.left = rubberbandRectangle.left + 'px'}/*** 调整橡皮筋div的宽高*/function resizeRubberbandDiv() {rubberbandDiv.style.width = rubberbandRectangle.width + 'px'rubberbandDiv.style.height = rubberbandRectangle.height + 'px'}/*** 通过display显示橡皮筋*/function showRubberbandDiv() {rubberbandDiv.style.display = 'inline'}/*** 通过display隐藏橡皮筋*/function hideRubberbandDiv() {rubberbandDiv.style.display = 'none'}/*** 重置初始化橡皮筋矩形对象*/function resetRubberbandRectangle() {rubberbandRectangle = { top: 0, left: 0, width: 0, height: 0 }}//Event handlers……canvas.onmousedown = function (ev) {var x = ev.x || ev.clientX,y = ev.y || ev.clientYev.preventDefault()rubberbandStart(x, y)}window.onmousemove = function (ev) {var x = ev.x || ev.clientX,y = ev.y || ev.clientYev.preventDefault()if (dragging) {rubberbandStretch(x, y)}}window.onmouseup = function (ev) {ev.preventDefault()rubberbandEnd()}image.onload = function (ev) {context.drawImage(image, 0, 0, canvas.width, canvas.height)}resetButton.onclick = function (ev) {context.clearRect(0, 0, context.canvas.width, context.canvas.height)context.drawImage(image, 0, 0, canvas.width, canvas.height)}//Initialization……image.src = 'arch.png'</script>
</html>

相关文章：

【第1章 基础知识】1.8 在 Canvas 中使用 HTML 元素

文章目录 前言示例-橡皮筋式选取框示例代码 前言 尽管我们可以说 Canvas 是 HTML5 之中最棒的功能&#xff0c;不过在实现网络应用程序时&#xff0c;很少会单独使用它。在绝大多数情况下&#xff0c;你都会将一个或更多的 canvas 元素与其他 HTML 控件结合起来使用&#xff0…...

编程日记 2025/6/2 0:31:34

c++流之sstream/堆or优先队列的应用[1]

目录 c流之sstream 解释 注意事项 215.数据流的第k大 问题分析 修正代码 主要修改点 优先队列的比较规则 代码中的比较逻辑 为什么这样能维护第 k 大元素&#xff1f; 举个例子 总结 Python 实现&#xff08;使用heapq库&#xff09; Java 实现&#xff08;使用P…...

编程日记 2025/6/2 8:22:30

SAR ADC 比较器噪声分析(二)

SAR ADC的比较器是非常重要的模块&#xff0c;需要仔细设计。主要考虑比较器的以下指标&#xff1a; 1)失调电压 2)输入共模范围 3)比较器精度 4)传输延时 5)噪声 6)功耗 这里主要讲一下动态比较器的noise。 动态比较器一般用于高速SAR ADC中&#xff0c;且精度不会超过12bit…...

编程日记 2025/6/2 8:38:01

c#与java的相同点和不同点

C# 和 Java 是两大主流的、面向对象的、托管型编程语言&#xff0c;它们共享许多相似的设计理念和语法&#xff0c;但也在细节、生态系统和运行平台上存在显著差异。以下是它们的相同点和不同点的详细对比&#xff1a; 一、相同点 (核心相似之处) 语法高度相似&#xff1a; 都源…...

编程日记 2025/6/2 0:17:00

phpmyadmin

安装PHPMyAdmin PHPMyAdmin通常可通过包管理器安装或手动部署。对于Linux系统&#xff08;如Ubuntu&#xff09;&#xff0c;使用以下命令安装&#xff1a; sudo apt update sudo apt install phpmyadmin安装过程中会提示选择Web服务器&#xff08;如Apache或Nginx&#xff0…...

编程日记 2025/6/2 5:49:37

机器学习Day5-模型诊断

实现机器学习算法的技巧。当我们训练模型或使用模型时&#xff0c;发现预测误差很 大&#xff0c;可以考虑进行以下优化&#xff1a; &#xff08;1&#xff09;获取更多的训练样本 &#xff08;2&#xff09;使用更少的特征 &#xff08;3&#xff09;获取其他特征 &#xff…...

编程日记 2025/6/2 1:31:44

如何将 WSL 的 Ubuntu-24.04 迁移到其他电脑

在使用 Windows Subsystem for Linux (WSL) 时&#xff0c;我们可能会遇到需要将现有的 WSL 环境迁移到其他电脑的情况。无论是为了备份、更换设备&#xff0c;还是在不同电脑之间共享开发环境&#xff0c;掌握迁移 WSL 子系统的方法都是非常有用的。本文将以 Ubuntu-24.04 为例…...

编程日记 2025/6/2 2:00:14

金融欺诈有哪些检测手段

金融欺诈检测是一个多层次的动态防御过程&#xff0c;需要结合技术手段、数据分析、人工智能和人工审核。以下是当前主流的检测手段和技术分类。 ### **一、核心技术手段** 1. **规则引擎&#xff08;Rule-Based Systems&#xff09;** - **原理**&#xff1a;预设基于历史…...

编程日记 2025/6/2 5:54:57

HTML5 全面知识点总结

一、HTML 基础概念 HTML&#xff1a;超文本标记语言&#xff0c;用于创建网页和 Web 应用的结构。 超文本&#xff1a;可以包含文字、图片、音频、视频、链接等多种媒体。 标记语言&#xff1a;通过标签标记网页的各个部分。 二、HTML5 的新特性&#xff08;区别于 HTML4&am…...

编程日记 2025/6/2 6:12:20

vscode一直连接不上虚拟机或者虚拟机容器怎么办？

1. 检查并修复文件权限 右键点击 C:\Users\20325\.ssh\config 文件&#xff0c;选择 属性 → 安全 选项卡。 确保只有你的用户账户有完全控制权限&#xff0c;移除其他用户&#xff08;如 Hena\Administrator&#xff09;的权限。 如果 .ssh 文件夹权限也有问题&#xff0c;同…...

编程日记 2025/6/2 6:18:07

初学c语言21（文件操作）

一.为什么使用文件 之前我们写的程序的数据都是存储到内存里面的&#xff0c;当程序结束时&#xff0c;内存回收&#xff0c;数据丢失&#xff0c; 再次运行程序时&#xff0c;就看不到上次程序的数据&#xff0c;如果要程序的数据一直保存得使用文件 二.文件 文件一般可以…...

编程日记 2025/6/2 6:20:13

数学复习笔记 21

4.15 稍微有点难啊。克拉默法则忘掉了&#xff0c;然后第二类数学归纳法是第一次见。行列式和矩阵&#xff0c;向量和方程组。这是前面四章。现在考研只剩下一个大题。所以就是考最后两章&#xff0c;特征值和二次型。感觉看网课的作用就是辅助理解&#xff0c;自己看书的话&am…...

编程日记 2025/6/1 19:29:14

华为OD机试真题——数据分类（2025B卷：100分）Java/python/JavaScript/C++/C语言/GO六种最佳实现

2025 B卷 100分 题型 本文涵盖详细的问题分析、解题思路、代码实现、代码详解、测试用例以及综合分析； 并提供Java、python、JavaScript、C++、C语言、GO六种语言的最佳实现方式！ 本文收录于专栏：《2025华为OD真题目录+全流程解析/备考攻略/经验分享》 华为OD机试真题《数据…...

编程日记 2025/6/1 22:51:15

JavaWeb开发基础Servlet生命周期与工作原理

Servlet生命周期 Servlet的生命周期由Servlet容器(如Tomcat、Jetty等)管理&#xff0c;主要包括以下5个阶段&#xff1a; 加载Servlet类 创建Servlet实例 调用init方法 调用service方法 调用destroy方法 加载(Loading)&#xff1a; 当Servlet容器启动或第一次接收到对某个…...

编程日记 2025/6/2 0:37:20

三防平板科普：有什么特殊功能？应用在什么场景？

在数字化浪潮席卷全球的今天&#xff0c;智能设备已成为现代工业、应急救援、户外作业等领域的核心工具。然而&#xff0c;常规平板电脑在极端环境下的脆弱性&#xff0c;如高温、粉尘、水浸或撞击&#xff0c;往往成为制约效率与安全的短板。三防平板&#xff08;防水、防尘、…...

编程日记 2025/6/2 6:09:12

百度外链生态的优劣解构与优化策略深度研究

本文基于搜索引擎算法演进与外链建设实践&#xff0c;系统剖析百度外链的作用机制与价值模型。通过数据统计、案例分析及算法逆向工程&#xff0c;揭示不同类型外链在权重传递、流量获取、信任背书等维度的差异化表现&#xff0c;提出符合搜索引擎规则的外链建设技术方案&#…...

编程日记 2025/6/2 8:52:59

笔记： 在WPF中ContentElement 和 UIElement 的主要区别

一、目的&#xff1a;简要姐扫在WPF中ContentElement 和 UIElement 的主要区别 ContentElement 和 UIElement 是 WPF 中的两个基类&#xff0c;它们在功能和用途上有显著的区别。 二、主要区别 ContentElement 主要特点: • 没有视觉表示: ContentElement 本身不直接渲染任…...

编程日记 2025/6/2 6:56:54

项目中使用到了多个UI组件库，也使用了Tailwindcss，如何确保新开发的组件样式隔离?

在项目中使用多个组件库&#xff0c;同时使用 TailwindCSS&#xff0c;确保新开发的组件样式隔离是非常重要的。样式隔离可以避免样式冲突、全局污染以及意外的样式覆盖问题。以下是一些常见的策略和最佳实践&#xff1a; 1. 使用 TailwindCSS 的 layer 机制 TailwindCSS 提供…...

编程日记 2025/6/1 20:48:35

AI提示工程(Prompt Engineering)高级技巧详解

AI提示工程(Prompt Engineering)高级技巧详解 文章目录 一、基础设计原则二、高级提示策略三、输出控制技术四、工程化实践五、专业框架应用提示工程是与大型语言模型(LLM)高效交互的关键技术，精心设计的提示可以显著提升模型输出的质量和相关性。以下是经过验证的详细提示工…...

编程日记 2025/6/2 5:43:26

【速写】PPOTrainer样例与错误思考（少量DAPO）

文章目录 序言1 TRL的PPO官方样例分析2 确实可行的PPOTrainer版本3 附录&#xff1a;DeepSeek关于PPOTrainer示例代码的对话记录Round 1&#xff08;给定模型数据集&#xff0c;让它开始写PPO示例&#xff09;Round 2 &#xff08;指出PPOTrainer的参数问题&#xff09;关键问题…...

编程日记 2025/6/2 4:59:39

5.26 面经整理 360共有云 golang

select … for update 参考&#xff1a;https://www.cnblogs.com/goloving/p/13590955.html select for update是一种常用的加锁机制&#xff0c;它可以在查询数据的同时对所选的数据行进行锁定&#xff0c;避免其他事务对这些数据行进行修改。 比如涉及到金钱、库存等。一般这…...

编程日记 2025/6/2 6:58:10

中国移动咪咕助力第五届全国人工智能大赛“AI+数智创新”专项赛道开展

第五届全国人工智能大赛由鹏城实验室主办&#xff0c;新一代人工智能产业技术创新战略联盟承办&#xff0c;华为、中国移动、鹏城实验室科教基金会等单位协办&#xff0c;广东省人工智能与机器人学会支持。 大赛发布“AI图像编码”、“AI增强视频质量评价”、“AI数智创新”三大…...

编程日记 2025/6/2 6:32:48

模具制造业数字化转型：精密模塑，以数字之力铸就制造基石

模具被誉为 “工业之母”&#xff0c;是制造业的重要基石&#xff0c;其精度直接决定了工业产品的质量与性能。在工业制造向高精度、智能化发展的当下&#xff0c;《模具制造业数字化转型&#xff1a;精密模塑&#xff0c;以数字之力铸就制造基石》这一主题&#xff0c;精准点明…...

编程日记 2025/6/2 6:31:04

PECVD 生成 SiO₂ 的反应方程式

在PECVD工艺中&#xff0c;沉积氧化硅薄膜以SiH₄基与TEOS基两种工艺路线为主。 IMD Oxide&#xff08;USG&#xff09; 这部分主要沉积未掺杂的SiO₂&#xff0c;也叫USG&#xff08;Undoped Silicate Glass&#xff09;&#xff0c;常用于IMD&#xff08;Inter-Metal Diele…...

编程日记 2025/6/2 0:55:04

React与Vue核心区别对比

React 和 Vue 都是当今最流行、功能强大的前端 JavaScript 框架&#xff0c;用于构建用户界面。它们有很多相似之处&#xff08;比如组件化、虚拟 DOM、响应式数据绑定&#xff09;&#xff0c;但也存在一些核心差异。以下是它们的主要区别&#xff1a; 1. 核心设计与哲学 Rea…...

编程日记 2025/6/2 6:35:00

2024 CKA模拟系统制作 | Step-By-Step | 17、题目搭建-排查故障节点

目录 免费获取题库配套 CKA_v1.31_模拟系统 一、题目 二、考点分析 1. Kubernetes 节点状态诊断 2. 节点故障修复技能 3. 持久化修复方案 4. SSH 特权操作 三、考点详细讲解 1. 节点状态机制详解 2. 常见故障原因深度分析 3. 永久修复技术方案 四、实验环境搭建步骤…...

编程日记 2025/6/2 6:31:02

如何将图像插入 PDF：最佳工具比较

无论您是编辑营销材料、写报告还是改写原来的PDF文件&#xff0c;将图像插入 PDF 都至关重要。幸运的是&#xff0c;有多种在线和离线工具可以简化此任务。在本文中&#xff0c;我们将比较一些常用的 PDF 添加图像工具&#xff0c;并根据您的使用场景推荐最佳解决方案&#xff…...

编程日记 2025/6/2 7:05:06

Linux 文件 IO 性能监控与分析指南

Linux 文件 I/O 性能监控与分析指南 继 CPU 和网络之后&#xff0c;文件系统 I/O 是影响系统性能的第三大关键领域。无论是数据库响应缓慢、应用加载时间过长&#xff0c;还是日志写入延迟&#xff0c;其根源都可能指向磁盘 I/O 瓶颈。本章将深入探讨文件 I/O 的核心概念、监控…...

编程日记 2025/6/2 3:33:51

ABP VNext + Apache Flink 实时流计算：打造高可用“交易风控”系统

ABP VNext Apache Flink 实时流计算&#xff1a;打造高可用“交易风控”系统 &#x1f310; &#x1f4da; 目录 ABP VNext Apache Flink 实时流计算&#xff1a;打造高可用“交易风控”系统 &#x1f310;一、背景&#x1f680;二、系统整体架构 &#x1f3d7;️三、实战展示…...

编程日记 2025/6/2 6:38:08

前端面试题-HTML篇

1. 请谈谈你对 Web 标准以及 W3C 的理解和认识。 我对 Web 标准 的理解是&#xff0c;它就像是互联网世界的“交通规则”&#xff0c;由 W3C&#xff08;World Wide Web Consortium&#xff0c;万维网联盟&#xff09; 这样一个国际性组织制定。这些规则规范了我们在编写 HTML…...

编程日记 2025/6/2 6:33:11