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

JavaScript - canvas - 放大镜

news 2026/2/8 11:11:24

效果

在这里插入图片描述

示例

项目结构：

在这里插入图片描述

源码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>放大镜</title><style type="text/css">div {width: 200px;height: 200px;display: inline-block;}</style></head><body><canvas id="canvas"></canvas><canvas id="piece" width="200" height="200" style="border: 1px solid black;"></canvas><script type="text/javascript">window.onload = (event) => {// console.log(event);main();}function main() {const canvas = document.querySelector("#canvas");const canvasContext = canvas.getContext("2d");const canvasPiece = document.querySelector("#piece");const canvasPieceContext = canvasPiece.getContext("2d");// canvasPieceContext.imageSmoothingEnabled = false;// Load imageconst image = new Image();image.onload = (event) => {// console.log(event);canvas.width = image.width;canvas.height = image.height;canvasContext.drawImage(image, 0, 0);}image.src = "img/transformers.jpg";// Hoveredcanvas.onmousemove = (event) => {// console.log(event);const x = event.layerX;const y = event.layerY;// 两倍放大{// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage// drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)// https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas#zooming_and_anti-aliasingcanvasPieceContext.drawImage(canvas, (x - 50), (y - 50), 100, 100, 0, 0, (100 * 2), (100 * 2));}}}</script></body>
</html>

相关文章：

JavaScript - canvas - 放大镜

效果 示例 项目结构&#xff1a; 源码&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8" /><title>放大镜</title><style type"text/css">div {width: 200px;height: 200px;display: inline-bl…...

编程日记 2023/9/23 17:10:17

PY32F003F18之输入捕获

输入捕获是定时器的功能之一&#xff0c;配合外部引脚&#xff0c;捕获脉宽时间或采集周期。 CPU中的定时器最基本的功能就是计数功能&#xff0c;其次是输入捕获(IC)&#xff0c;再次就是比较输出(OC)&#xff0c;还有就是使用引脚对外部时钟进行计数&#xff0c;触发信号捕捉…...

编程日记 2023/9/23 17:09:17

科目三基础四项（一）

​ 第一天&#xff0c;基础操作&#xff0c;仪表&#xff0c;方向&#xff0c;挡位 按照模块来 1、方向盘两手在两侧 ​ 编辑 转向时的角度&#xff0c;只用&#xff1a;向左540&#xff0c;向右180 向左打和向右打的角度要抵消&#xff0c;回正 掉头向左打满再回 注意…...

编程日记 2023/9/23 17:08:16

C语言入门Day_24 函数与指针

目录 前言&#xff1a; 1.指针和数组 2.函数和指针 3.易错点 4.思维导图 前言&#xff1a; 我们知道数组是用来存储多个数据的&#xff0c;以及我们可以用指针来指向一个变量。那么我们可以用指针来指向一个数组中的数据么&#xff1f; 指针除了可以像指向一个变量一样指…...

编程日记 2023/9/23 17:07:15

9月21日，每日信息差

今天是2023年9月21日&#xff0c;以下是为您准备的14条信息差 第一、谷歌高管已经广泛讨论了在2027年之前将博通作为人工智能芯片供应商的可能性 第二、清华系团队宣布研发出千亿参数“制药版ChatGPT”&#xff0c;覆盖药物立项、临床前研究、临床试验的各阶段&#xff0c;作…...

编程日记 2023/9/23 17:06:14

【FAQ】安防监控系统/视频云存储/监控平台EasyCVR服务器解释器出现变更该如何修改？

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…...

编程日记 2023/9/23 17:05:13

Python手写人脸识别

Python手写人脸识别 引言 人脸识别是一种通过计算机视觉和模式识别技术来识别和验证人脸的技术。Python是一种广泛使用的编程语言，它提供了许多强大的库和工具来实现人脸识别。 在Python中，可以使用多种方法来实现人脸识别，包括基于特征提取的方法、基于深度学习的方法等…...

编程日记 2023/9/23 17:03:09

我的Qt作品（19）使用Qt写一个轻量级的视觉框架---第2章，仿海康VM实现思维导图拖拽方式的算法流程图

上次写的第1章介绍了主界面的设计。 https://blog.csdn.net/libaineu2004/article/details/130277151 本次是第2章&#xff0c;主要介绍流程图的运行。 目前市面上视觉框架很多&#xff0c;主要有列表图方式和流程图方式。海康VM的流程图方式比较受用户的喜爱和欢迎&#xf…...

编程日记 2023/9/23 17:02:08

仿写Timi记账

项目仿照Timi记账&#xff0c;本 APP 仅用作学习&#xff0c;如有侵权联系删除&#xff0c;项目地址&#xff1a;Timi记账 TIMI记账项目 简单功能对于tableview向上延伸部分采用了insertSubview形式&#xff1a;添加特殊字体添加.ttf文件获取plist文件数据 计算器功能说明简单逻…...

编程日记 2023/9/23 17:01:06

Java语言实现 比较两个Date日期的先后

在 Java 中&#xff0c;可以使用 Date 类的 compareTo() 方法或 before()、after() 方法来比较两个 Date 类型的日期的先后顺序。 使用 compareTo() 方法&#xff1a; Date date1 ...; // 第一个日期 Date date2 ...; // 第二个日期int result date1.compareTo(date2); if (…...

编程日记 2023/9/23 16:56:59

el-table 指定层级展开

先来看看页面默认全部展开时页面的显示效果&#xff1a;所有节点被展开&#xff0c;一眼望去杂乱无章&#xff01; 那么如何实现只展开指定的节点呢&#xff1f;最终效果如下&#xff1a;一眼看去很舒爽。 干货上代码&#xff1a; <el-table border v-if"refreshTabl…...

编程日记 2023/9/23 16:55:58

3288S Android11 适配红外遥控功能（超详细）

目录 一、rk3288平台红外遥控介绍二、原理图分析三、配置设备树并使能红外遥控功能四、打开红外打印功能&#xff0c;查看红外遥控的用户码和键值五、将查看到的红外遥控用户码和键值添加到设备树和.kl文件六、Android红外遥控.kl文件映射知识和使用添加新的.kl文件七、补充&am…...

编程日记 2023/9/23 16:53:54

Linux高性能服务器编程 学习笔记 第三章 TCP协议详解

与IP协议相比&#xff0c;TCP协议更靠近应用层&#xff0c;因此在应用程序中有更强的可操作性。一些重要的socket选项都和TCP协议相关。 本章从以下方面讨论TCP协议&#xff1a; 1.TCP头部信息。TCP头部信息出现在每个TCP报文段中&#xff0c;用于指定通信的源端端口号、目的端…...

编程日记 2023/9/23 16:52:54

【云原生】Kubernetes学习笔记

部署 在部署前强调几点 不要使用IPv6, 很多组件都不支持IPv6不要使用最新版本, 最新版本非常不稳定, 甚至可能存在无法运行的bug不要版本更新, 安装后就将版本固定下来, 新的版本可能会引入新功能, 或移除旧功能, 导致Kubernetes无法运行 Kubeadm介绍 K8s是由多个模块构成的…...

编程日记 2023/9/23 16:49:49

[Machine Learning][Part 2]监督学习的实现

目录 线性模型实现&#xff1a; cost function &#xff1a;代价函数或者损失函数——衡量模型优劣的一个指标 理论&#xff1a; 代码实现: 梯度下降——自动寻找最小的cost function 代价函数 梯度的概念&#xff1a; 梯度下降公式&#xff1a; 实现一个简单的监督学习…...

编程日记 2023/9/23 16:48:48

【计算机毕业设计】基于SpringBoot+Vue大学生心理健康管理系统的开发与实现

博主主页&#xff1a;一季春秋博主简介&#xff1a;专注Java技术领域和毕业设计项目实战、Java、微信小程序、安卓等技术开发&#xff0c;远程调试部署、代码讲解、文档指导、ppt制作等技术指导。主要内容&#xff1a;毕业设计(Java项目、小程序等)、简历模板、学习资料、面试题…...

编程日记 2023/9/23 16:47:47

下载水果FLStudio21.2软件安装更新教程

编曲是一种对音乐创作过程中涉及的元素和步骤进行组织和安排的艺术形式。对于想要学习编曲的人来说&#xff0c;以下是一些有用的建议&#xff1a; 1. 学习基础知识 在开始学习编曲之前&#xff0c;你需要掌握一些基础知识&#xff0c;例如音乐理论、乐器演奏和数字音乐制作技…...

编程日记 2023/9/23 16:46:46

人工智能机器学习-飞桨神经网络与深度学习

飞桨神经网络与深度学习-机器学习 目录 飞桨神经网络与深度学习-机器学习 1.机器学习概述 2.机器学习实践五要素 2.1.数据 2.2.模型 2.3.学习准则 2.4.优化算法 2.5.评估标准 3.实现简单的线性回归模型 3.1.数据集构建 3.2.模型构建 3.3.损失函数 3.4.模型优化 3…...

编程日记 2023/9/23 16:45:44

linux部署页面内容

/bin&#xff1a;该目录包含了常用的二进制可执行文件&#xff0c;如ls、cp、mv、rm等等。 /boot&#xff1a;该目录包含了启动Linux系统所需的文件&#xff0c;如内核文件和引导加载程序。 /dev&#xff1a;该目录包含了所有设备文件&#xff0c;如硬盘、光驱、鼠标、键盘等等…...

编程日记 2023/9/23 16:42:39

若依框架集成WebSocket带用户信息认证

一、WebSocket 基础知识 我们平时前后台请求用的最多的就是 HTTP/1.1协议&#xff0c;它有一个缺陷&#xff0c; 通信只能由客户端发起&#xff0c;如果想要不断获取服务器信息就要不断轮询发出请求&#xff0c;那么如果我们需要服务器状态变化的时候能够主动通知客户端就需要用…...

编程日记 2023/9/23 16:41:37

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2026/1/28 8:17:53

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2026/2/5 17:51:52

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/12/14 11:45:02

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

编程新知 2026/1/26 9:30:45

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

编程新知 2026/1/26 6:01:03

深度学习水论文：mamba＋图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

编程新知 2026/1/26 4:52:47

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

编程新知 2026/1/31 8:55:37

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

编程新知 2026/1/31 13:04:44

MacOS下Homebrew国内镜像加速指南（2025最新国内镜像加速）

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

编程新知 2026/1/28 10:57:16