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

理解 HTML5 Canvas 中逻辑像素与物理像素的关系

理解 HTML5 Canvas 中逻辑像素与物理像素的关系

在使用 HTML5 Canvas 时,开发者经常会遇到一个困惑:为什么鼠标的 offsetXoffsetY 和我绘制的图形坐标对不上?这通常是因为 Canvas 的逻辑像素大小和物理像素大小不一致。本文将详细解释这个问题,并给出通用解决方案。


什么是逻辑像素和物理像素?

逻辑像素

  • 是 Canvas 内部的绘图坐标系大小,由 Canvas 元素的 widthheight 属性决定。
  • 例如:
    <canvas width="400" height="400"></canvas>
    
    上面的代码定义了一个 400x400 的逻辑像素大小。绘图时坐标范围为 (0, 0)(400, 400)

物理像素

  • 是 Canvas 在网页中实际显示的尺寸,由 CSS 样式的 widthheight 控制。
  • 例如:
    <canvas width="400" height="400" style="width: 200px; height: 200px;"></canvas>
    
    上面的代码将 Canvas 的显示缩小了一半,视觉上它是一个 200x200 的区域,但绘图坐标仍然是 (0, 0)(400, 400)

为什么鼠标事件会出现问题?

当鼠标点击 Canvas 时,offsetXoffsetY 是基于 物理像素 的鼠标位置,而绘图坐标是基于 逻辑像素 的。两者之间的比例由 Canvas 的逻辑大小和 CSS 显示大小的关系决定。

例如:

<canvas width="400" height="400" style="width: 200px; height: 200px;"></canvas>
  1. 逻辑像素:绘制一个矩形,坐标为 (50, 50, 100, 100)
  2. 物理像素:鼠标点击位置为 (100, 100),但因为显示缩小了一半,offsetX 实际代表逻辑坐标的 (200, 200)

结果:鼠标事件坐标和图形坐标完全对不上!


如何解决?

解决问题的关键是计算 逻辑坐标和物理坐标之间的缩放比例,然后对鼠标事件的坐标进行调整。

通用解决方案:动态计算缩放比例

通过 Canvas 的 getBoundingClientRect() 方法,可以获取 Canvas 在页面中的物理尺寸,再结合其逻辑大小计算缩放比例。

以下是完整代码实现:

handleMouseDown(e) {const dom = this.$refs.canvasRef; // 获取 Canvas DOMconst rect = dom.getBoundingClientRect(); // 获取物理大小// 计算缩放比例const scaleX = dom.width / rect.width; // X 轴缩放比例const scaleY = dom.height / rect.height; // Y 轴缩放比例// 调整鼠标坐标const offsetX = e.offsetX * scaleX;const offsetY = e.offsetY * scaleY;console.log(`Adjusted Mouse Position: (${offsetX}, ${offsetY})`);
}

完整案例:支持高分辨率与 CSS 缩放的 Canvas 鼠标交互

以下是一个完整的 Canvas 鼠标点击交互案例,解决逻辑像素和物理像素不一致的问题。

HTML

<canvas id="myCanvas" width="800" height="800" style="width: 400px; height: 400px; border: 1px solid black;"></canvas>

JavaScript

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");// 绘制一个矩形
ctx.fillStyle = "blue";
ctx.fillRect(200, 200, 200, 200);// 监听鼠标点击事件
canvas.addEventListener("mousedown", (e) => {// 获取物理大小const rect = canvas.getBoundingClientRect();// 计算缩放比例const scaleX = canvas.width / rect.width;const scaleY = canvas.height / rect.height;// 调整鼠标坐标const offsetX = e.offsetX * scaleX;const offsetY = e.offsetY * scaleY;console.log(`Mouse Logical Position: (${offsetX}, ${offsetY})`);// 检测点击是否在矩形内if (offsetX >= 200 && offsetX <= 400 &&offsetY >= 200 && offsetY <= 400) {alert("You clicked inside the rectangle!");}
});

适配高分辨率屏幕(Retina 屏幕)

在高分辨率屏幕上,Canvas 的默认显示分辨率可能不足,导致图形模糊。为了解决这个问题,可以在逻辑像素上增加分辨率,同时按比例调整 CSS 样式。

解决方案

  1. 设置高分辨率 Canvas:

    const dpr = window.devicePixelRatio || 1;
    canvas.width = 400 * dpr; // 提高逻辑像素
    canvas.height = 400 * dpr;
    canvas.style.width = "400px"; // 设置 CSS 尺寸
    canvas.style.height = "400px";ctx.scale(dpr, dpr); // 按设备像素比缩放绘图
    
  2. 鼠标事件仍然适用缩放比例,无需额外调整。


总结

核心点

  1. 逻辑像素 vs. 物理像素

    • 逻辑像素由 widthheight 定义,用于绘图。
    • 物理像素由 CSS 控制,影响显示大小。
  2. 鼠标事件坐标映射

    • 使用 getBoundingClientRect() 获取物理大小。
    • 根据缩放比例调整 offsetXoffsetY
  3. 适配高分辨率屏幕

    • 提升逻辑像素分辨率。
    • 使用 scale 方法确保绘图清晰。

代码复用性

  • 无论是适配高分辨率屏幕,还是处理鼠标事件,计算逻辑和物理像素缩放比例是通用的解决方案。这个方法不仅适用于 Canvas,也适用于其他需要精确像素计算的场景。

希望本文能帮助你更好地理解和解决 Canvas 中的坐标问题! 🎨

相关文章:

理解 HTML5 Canvas 中逻辑像素与物理像素的关系

理解 HTML5 Canvas 中逻辑像素与物理像素的关系 在使用 HTML5 Canvas 时&#xff0c;开发者经常会遇到一个困惑&#xff1a;为什么鼠标的 offsetX 和 offsetY 和我绘制的图形坐标对不上&#xff1f;这通常是因为 Canvas 的逻辑像素大小和物理像素大小不一致。本文将详细解释这…...

7.揭秘C语言输入输出内幕:printf与scanf的深度剖析

揭秘C语言输入输出内幕&#xff1a;printf与scanf的深度剖析 C语言往期系列文章目录 往期回顾&#xff1a; VS 2022 社区版C语言的安装教程&#xff0c;不要再卡在下载0B/s啦C语言入门&#xff1a;解锁基础概念&#xff0c;动手实现首个C程序C语言概念之旅&#xff1a;解锁关…...

数据分析-系统认识数据分析

目录 数据分析的全貌 观测 实验 应用 数据分析的全貌 观测 实验 应用...

蓝桥杯介绍

赛事背景与历程 自2009年举办以来&#xff0c;蓝桥杯已经连续举行了多届&#xff0c;成为国内领先的信息技术赛事。2022年&#xff0c;蓝桥杯被教育部确定为2022—2025学年面向中小学生的全国性竞赛活动&#xff0c;并入选国家级A类学科竞赛。 参赛对象与组别 蓝桥杯的参赛对…...

鸿蒙加载网络图片并转换成PixelMap

鸿蒙加载网络图片并转换成PixelMap 参考文档 基于API12. 有一些图片功能需要使用 PixelMap 类型的参数&#xff0c;但是使用Image组件之类的时候无法获取到 PixelMap 类型数据。 因此只能是把图片下载下来然后加在并转换一下。 实现方式 一下封装了一个函数。使用的 rcp 模…...

hive搭建

1.准备环境 三台节点主机已安装hadoopmysql数据库 2.环境 2.1修改三台节点上hadoop的core-site.xml <!-- 配置 HDFS 允许代理任何主机和组 --> <property><name>hadoop.proxyuser.hadoop.hosts</name><value>*</value> </property&…...

51c扩散模型~合集1

我自己的原文哦~ https://blog.51cto.com/whaosoft/11541675 #Diffusion Forcing 无限生成视频&#xff0c;还能规划决策&#xff0c;扩散强制整合下一token预测与全序列扩散 当前&#xff0c;采用下一 token 预测范式的自回归大型语言模型已经风靡全球&#xff0c;同时互联…...

从零开始深度学习:全连接层、损失函数与梯度下降的详尽指南

引言 在深度学习的领域&#xff0c;全连接层、损失函数与梯度下降是三块重要的基石。如果你正在踏上深度学习的旅程&#xff0c;理解它们是迈向成功的第一步。这篇文章将从概念到代码、从基础到进阶&#xff0c;详细剖析这三个主题&#xff0c;帮助你从小白成长为能够解决实际…...

Liebherr利勃海尔 EDI 需求分析

Liebherr 使用 EDI 技术来提高业务流程的效率、降低错误率、加快数据交换速度&#xff0c;并优化与供应商、客户和其他合作伙伴之间的业务沟通。通过 EDI&#xff0c;Liebherr 实现了与全球交易伙伴的自动化数据交换&#xff0c;提升了供应链管理和订单处理的透明度。 Liebher…...

java小练习

小练1.用while语句计算11/2!1/3!1/4!...1/20!的和 public class test_11_17_2 {public static void main(String[] args) {double sum 0;double item 1;int n 20;int i 1;while(i<n){sum item;i i1;item item*(1.0/i);}System.out.println(sum);} } 小练2.计算88888…...

go语言中的占位符有哪些

在Go语言中&#xff0c;占位符主要用于格式化字符串输出&#xff0c;特别是在使用fmt包中的Printf系列函数时。以下是Go语言中常用的占位符&#xff1a; %v&#xff1a;代表值的默认格式&#xff0c;对于字符串是直接输出&#xff0c;对于整型是十进制形式。%v&#xff1a;扩展…...

基于Windows安装opus python库

项目中需要用到一些opus格式的编解码功能&#xff0c;找到网上有opus的开源库。网址&#xff1a;Opus Codec 想着人生苦短&#xff0c;没想到遇上了错误&#xff01;在这里记录一下过程 过程 安装python库 pip3 install opuslib验证 >>> import opuslib Tracebac…...

【设计模式】行为型模式(五):解释器模式、访问者模式、依赖注入

《设计模式之行为型模式》系列&#xff0c;共包含以下文章&#xff1a; 行为型模式&#xff08;一&#xff09;&#xff1a;模板方法模式、观察者模式行为型模式&#xff08;二&#xff09;&#xff1a;策略模式、命令模式行为型模式&#xff08;三&#xff09;&#xff1a;责…...

使用nossl模式连接MySQL数据库详解

使用nossl模式连接MySQL数据库详解 摘要一、引言二、nossl模式概述2.1 SSL与nossl模式的区别2.2 选择nossl模式的场景三、在nossl模式下连接MySQL数据库3.1 准备工作3.2 C++代码示例3.3 代码详解3.3.1 初始化MySQL连接对象3.3.2 连接到MySQL数据库3.3.3 执行查询操作3.3.4 处理…...

【MySQL】ubantu 系统 MySQL的安装与免密码登录的配置

&#x1f351;个人主页&#xff1a;Jupiter. &#x1f680; 所属专栏&#xff1a;MySQL初阶探索&#xff1a;构建数据库基础 欢迎大家点赞收藏评论&#x1f60a; 目录 &#x1f4da;mysql的安装&#x1f4d5;MySQL的登录&#x1f30f;MySQL配置免密码登录 &#x1f4da;mysql的…...

高级 SQL 技巧讲解

​ 大家好&#xff0c;我是程序员小羊&#xff01; 前言&#xff1a; SQL&#xff08;结构化查询语言&#xff09;是管理和操作数据库的核心工具。从基本的查询语句到复杂的数据处理&#xff0c;掌握高级 SQL 技巧不仅能显著提高数据分析的效率&#xff0c;还能解决业务中的复…...

浅论AI大模型在电商行业的发展未来

随着人工智能&#xff08;AI&#xff09;技术的快速发展&#xff0c;AI大模型在电商行业中扮演着越来越重要的角色。本文旨在探讨AI大模型如何赋能电商行业&#xff0c;包括提升销售效率、优化用户体验、增强供应链管理等方面。通过分析AI大模型在电商领域的应用案例和技术进展…...

【python笔记03】《类》

文章目录 面向对象基本概念对象的概念类的概念 类的定义类的创建&#xff08;实例的模板&#xff09;类的实例化--获取对象对象方法中的self关键字面试题请描述什么是对象&#xff0c;什么是类。请观阅读如下代码&#xff0c;判断是否能正常运行&#xff0c;如果不能正常运行&a…...

Flutter 应用在真机上调试的流程

在真机上调试 Flutter 应用的方法有很多&#xff0c;可以使用 USB 数据线连接设备到电脑进行调试&#xff0c;也可以通过无线方式进行 Flutter 真机调试。 1. 有线调试 设备准备 启用开发者模式&#xff1a; Android&#xff1a;进入 设置 > 关于手机&#xff0c;连续点击…...

以太坊基础知识结构详解

以太坊的历史和发展 初创阶段 2013年&#xff1a;Vitalik Buterin 发表了以太坊白皮书&#xff0c;提出了一个通用的区块链平台&#xff0c;不仅支持比特币的货币功能&#xff0c;还能支持更复杂的智能合约。2014年&#xff1a;以太坊项目启动&#xff0c;进行了首次ICO&…...

安全见闻(完整版)

目录 安全见闻1 编程语言和程序 编程语言 函数式编程语言&#xff1a; 数据科学和机器学习领域&#xff1a; Web 全栈开发&#xff1a; 移动开发&#xff1a; 嵌入式系统开发&#xff1a; 其他&#xff1a; 编程语言的方向&#xff1a; 软件程序 操作系统 硬件设备…...

LeetCode100之反转链表(206)--Java

1.问题描述 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表 示例1 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1] 示例2 输入&#xff1a;head [1,2] 输出&#xff1a;[2,1] 示例3 输入&#xff1a;head [] 输…...

牛客周赛第一题2024/11/17日

链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 时间限制&#xff1a;C/C/Rust/Pascal 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C/Rust/Pascal 256 M&#xff0c;其他语言512 M 64bit IO Format: %lld 题目描述 小红这天来到了三…...

麒麟Server下安装东方通TongLINK/Q

环境 系统&#xff1a;麒麟Server SP3 2403 应用&#xff1a;TLQ8.1(Install_TLQ_Standard_Linux2.6.32_x86_64_8.1.17.0.tar.gz) 安装Server 将文件解压到/usr/local/tlq。 cd /opt/tlq/ mkdir /usr/local/tlq/ tar -zxvf Install_TLQ_Standard_Linux2.6.32_x86_64_8.1.1…...

BERT的中文问答系统33

我们在现有的代码基础上增加网络搜索的功能。我们使用 requests 和 BeautifulSoup 来从百度搜索结果中提取信息。以下是完整的代码&#xff0c;包括项目结构、README.md 文件以及所有必要的代码。 项目结构 xihe241117/ ├── data/ │ └── train_data.jsonl ├── lo…...

Ubuntu下的Eigen库的安装及基本使用教程

一、Eigen库介绍 简介 Eigen [1]目前最新的版本是3.4&#xff0c;除了C标准库以外&#xff0c;不需要任何其他的依赖包。Eigen使用的CMake建立配置文件和单元测试&#xff0c;并自动安装。如果使用Eigen库&#xff0c;只需包特定模块的的头文件即可。 基本功能 Eigen适用范…...

【spring 】Spring Cloud Gateway 的Filter学习

介绍和使用场景 Spring Cloud Gateway 是一个基于 Spring Framework 5 和 Project Reactor 的 API 网关&#xff0c;它旨在为微服务架构提供一种简单而有效的方式来处理请求路由、过滤、限流等功能。在 Spring Cloud Gateway 中&#xff0c;Filter 扮演着非常重要的角色&#…...

每秒交易数(Transactions Per Second:TPS)详细拆解

每秒交易数&#xff08;TPS&#xff09;是指计算机网络每秒可以处理的交易数量。TPS是衡量不同区块链和其他计算机系统速度的关键指标。然而&#xff0c;TPS并不是用来衡量区块链速度的唯一指标。许多人认为&#xff0c;虽然TPS很重要&#xff0c;但最终性实际上是一个更重要的…...

【初阶数据结构与算法】链表刷题之链表分割、相交链表、环形链表1、环形链表I、环形链表II

文章目录 一、链表分割二、相交链表三、环形链表I四、环形链表|| 一、链表分割 题目链接&#xff1a;https://www.nowcoder.com/practice/0e27e0b064de4eacac178676ef9c9d70 我们来看看链表分割的题目描述和它给出的函数&#xff1a;    这个题虽然是以C形式来做&#xff0…...

【STL】set,multiset,map,multimap的介绍以及使用

关联式容器 在C的STL中包含序列式容器和关联式容器 1.关联式容器&#xff1a;它里面存储的是元素本身&#xff0c;其底层是线性序列的数据结构&#xff0c;比如&#xff1a;vector&#xff0c;list&#xff0c;deque&#xff0c;forward_list(C11)等 2.关联式容器里面储存的…...