canvas坐标转换屏幕坐标_软件项目技术点(2)——Canvas之坐标系转换

本文介绍了canvas绘图中的坐标系转换,包括默认坐标系与当前坐标系的概念,以及如何通过translate、scale和rotate进行坐标变换。还详细讲解了transform方法和矩阵变换原理,展示了如何实现平移、缩放和旋转的效果。
摘要由CSDN通过智能技术生成

AxeSlide软件项目梳理   canvas绘图系列知识点整理

默认坐标系与当前坐标系

canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸。左上角坐标为x=0,y=0的点称作原点。在默认坐标系中,每一个点的坐标都是直接映射到一个CSS像素上。

但是如果图像的每次绘制都参考一个固定点将缺少灵活性,于是在canvas中引入“当前坐标系”的概念,所谓“当前坐标系”即指图像在此时绘制的时候所参考的坐标系,它也会作为图像状态的一部分。比如rotate旋转操作,改变当前坐标系也就是改变了rotate的参考点,试想下如果没有当前坐标系的概念,无论是旋转,缩放,倾斜等操作不就只能参考画布左上角原点了吗。

注:以下的context均为 getContext("2d")所得的CanvasRenderingContext2D对象。

默认坐标系如下图所示:

1. 如果调用context.translate(100,50),当前坐标系与默认坐标系相对位置如下图

2. 如果调用context.scale(2,2),当前坐标系与原默认坐标系的刻度如下,红色代表当前坐标系

3. 如果调用context.rotate(Math.PI/6)顺时针旋转30度,当前坐标系与默认坐标系相对位置如下图

Canvas坐标转换屏幕坐标主要涉及到两个概念:Canvas坐标系屏幕坐标系Canvas坐标系是指Canvas画布上的坐标系,它的原Canvas的左上角,x轴向右增加,y轴向下增加;屏幕坐标系是指计算机屏幕上的坐标系,它的原屏幕左上角,x轴向右增加,y轴向下增加。 在确定Canvas坐标屏幕坐标之间的转换关系之前,我们首先需要获取Canvas的位置信息,也就是左上角屏幕坐标系上的x和y坐标。可以使用以下代码获取: ```javascript const canvas = document.getElementById('myCanvas'); const canvasX = canvas.getBoundingClientRect().left; const canvasY = canvas.getBoundingClientRect().top; ``` 接下来我们需要考虑Canvas上的元素位置信息,如矩形、圆形、文本等。Canvas坐标转换屏幕坐标的方法有两种: 1. 使用CanvasRenderingContext2D的`transform()`方法:可以通过该方法将Canvas坐标系转换屏幕坐标系,从而直接获取元素在屏幕上的位置信息。 ```javascript const ctx = canvas.getContext('2d'); ctx.fillRect(50, 50, 100, 100); //画一个矩形 //获取元素在屏幕上的位置信息 const screenX = 50 + canvasX; const screenY = 50 + canvasY; const screenWidth = 100; const screenHeight = 100; ``` 2. 手动计算转换:将Canvas坐标系中的坐标转换屏幕坐标系中的坐标,需要注意的是,由于两个坐标系的原和方向不同,因此转换时需要进行坐标轴翻转和坐标系平移等操作。 ```javascript const ctx = canvas.getContext('2d'); ctx.fillRect(50, 50, 100, 100); //画一个矩形 //手动计算元素在屏幕上的位置信息 const x = 50; const y = 50; const width = 100; const height = 100; const screenX = x + canvasX; const screenY = canvas.height - y - height + canvasY; const screenWidth = width; const screenHeight = height; ``` 在实际应用中,我们通常会采用第一种方式进行转换,因为它更为简洁方便,同时也是推荐使用的方式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值