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

JavaScript - canvas - 放大镜

news 2026/2/7 12:07:20

效果

在这里插入图片描述

示例

项目结构：

在这里插入图片描述

源码：

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

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2026/2/5 15:43:28

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2026/1/24 7:56:15

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2026/1/25 13:13:20

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

编程新知 2025/11/25 22:46:30

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2026/2/4 10:54:26

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

编程新知 2026/1/24 14:16:56

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

编程新知 2025/8/19 22:24:50

机器学习的数学基础：线性模型

线性模型 线性模型的基本形式为&#xff1a; f ( x ) ω T x b f\left(\boldsymbol{x}\right)\boldsymbol{\omega}^\text{T}\boldsymbol{x}b f(x)ωTxb 回归问题 利用最小二乘法&#xff0c;得到 ω \boldsymbol{\omega} ω和 b b b的参数估计$ \boldsymbol{\hat{\omega}}…...

编程新知 2025/10/2 9:07:50

文件上传漏洞防御全攻略

要全面防范文件上传漏洞&#xff0c;需构建多层防御体系&#xff0c;结合技术验证、存储隔离与权限控制&#xff1a; &#x1f512; 一、基础防护层 前端校验&#xff08;仅辅助&#xff09; 通过JavaScript限制文件后缀名&#xff08;白名单&#xff09;和大小&#xff0c;提…...

编程新知 2025/8/18 19:05:00

GAN模式奔溃的探讨论文综述（一）

简介 简介：今天带来一篇关于GAN的，对于模式奔溃的一个探讨的一个问题，帮助大家更好的解决训练中遇到的一个难题。 论文题目：An in-depth review and analysis of mode collapse in GAN 期刊：Machine Learning 链接：...

编程新知 2026/2/5 12:53:14