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

JavaScript - canvas - 放大镜

news 2026/3/28 7:01:31

效果

在这里插入图片描述

示例

项目结构：

在这里插入图片描述

源码：

<!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

SU-03T模块烧录固件保姆级教程：从‘智能公元’配置到串口下载（避坑‘路径中文’和‘重新上电’）

SU-03T固件烧录实战指南&#xff1a;从智能公元配置到串口下载全流程解析 第一次拿到SU-03T语音模块时&#xff0c;那种既兴奋又忐忑的心情我至今记忆犹新。作为一款高性能离线语音识别模块&#xff0c;SU-03T确实能带来无限可能&#xff0c;但固件烧录这个看似简单的步骤却让不…...

编程新知 2026/3/28 6:44:49

StructBERT-Large本地化部署实战：无需联网、不传数据、隐私安全的语义匹配解决方案

StructBERT-Large本地化部署实战&#xff1a;无需联网、不传数据、隐私安全的语义匹配解决方案 你是不是经常需要判断两句话是不是一个意思&#xff1f;比如&#xff0c;检查用户提交的答案是否和标准答案一致&#xff0c;或者判断两篇新闻稿是不是在说同一件事。过去&#xf…...

编程新知 2026/3/28 5:24:03

如何让鼠标和触控板和平共处：Scroll Reverser实现设备独立控制的效率革命

如何让鼠标和触控板和平共处&#xff1a;Scroll Reverser实现设备独立控制的效率革命 【免费下载链接】Scroll-Reverser Per-device scrolling prefs on macOS. 项目地址: https://gitcode.com/gh_mirrors/sc/Scroll-Reverser 在多设备协同办公成为常态的今天&#xff0…...

编程新知 2026/3/28 4:38:01

【STM32F4系列】【HAL库】【实战解析】MPU6050 DMP姿态解算与I2C通信优化

1. MPU6050与DMP库基础解析 第一次接触MPU6050时&#xff0c;我被它小巧的体积和强大的功能震撼到了。这个售价不到10元的芯片&#xff0c;居然能同时测量三轴角加速度和三轴线加速度。在实际项目中&#xff0c;我发现直接读取原始数据并不难&#xff0c;但要想获得稳定的姿态信…...

编程新知 2026/3/28 3:51:48

医美私信获客新范式：快商通AI私信机器人如何实现高效客户转化

医美私信获客新范式&#xff1a;快商通AI私信机器人如何实现高效客户转化 关键要点&#xff1a; 医美行业夜间咨询流失率高达 78% &#xff0c;响应不及时是主要原因 快商通AI私信机器人实现 724小时 智能接待&#xff0c;开口率从 22% 提升至 100% 实际应用数据显示&#xff0…...

编程新知 2026/3/28 3:45:37

从‘瓦特’到‘分贝瓦’：一个公式讲透无线通信中的功率与信噪比换算

从‘瓦特’到‘分贝瓦’&#xff1a;无线通信中的功率与信噪比实战指南 在无线通信系统设计中&#xff0c;功率与信噪比的换算如同工程师的"货币兑换"——你需要熟练掌握瓦特&#xff08;W&#xff09;、分贝瓦&#xff08;dBW&#xff09;、分贝毫瓦&#xff08;dB…...

编程新知 2026/3/28 2:26:52

AI辅助下的走马观碑：让智能体自动优化你的任务管理应用逻辑

今天想和大家分享一个特别实用的开发经验——如何用AI给任务管理应用"开外挂"。最近在做一个待办事项应用时&#xff0c;我发现单纯的手动输入任务实在太原始了&#xff0c;于是尝试用AI来增强功能&#xff0c;效果出乎意料的好。 智能任务分析功能 传统的任务管理…...

编程新知 2026/3/28 1:52:08

抖音视频批量下载器：如何快速高效地收集和管理海量抖音内容

抖音视频批量下载器&#xff1a;如何快速高效地收集和管理海量抖音内容 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 抖音作为国内最大的短视频平台&#xff0c;每天产生数以百万计的视频内容&#xff0c;…...

编程新知 2026/3/28 0:15:22

经典概率题：飞机座位分配问题（LeetCode 1227）超详细解析

一、题目背景与描述这是一道非常经典的概率与逻辑推理面试题&#xff0c;也是 LeetCode 第 1227 题「飞机座位分配概率」。题目描述有 n 位乘客即将登机&#xff0c;飞机正好有 n 个座位。第一位乘客的票丢了&#xff0c;他随机选一个座位坐下。剩下的乘客&#xff1a;如果自己…...

编程新知 2026/3/27 23:48:55

告别调参玄学：手把手教你用‘黎卡提方程’为自动驾驶LQR控制器选择Q和R矩阵

自动驾驶轨迹跟踪实战&#xff1a;从黎卡提方程到LQR调参的工程化思考 当你在仿真环境中第一次看到自己设计的LQR控制器让车辆完美跟踪参考轨迹时&#xff0c;那种成就感难以言喻。但更多时候&#xff0c;我们面对的是震荡的超调曲线、缓慢的收敛速度&#xff0c;以及令人抓狂的…...

编程新知 2026/3/27 23:40:43