canvas坐标转换屏幕坐标_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度,当前坐标系与默认坐标系相对位置如下图
矩阵变换transform
上文提到的坐标变形的三种方式,平移translate,缩放scale以及旋转rotate都可以通过transform做到。
现在我们先来看看矩阵变换的定义:Context.transform(m11,m12,m21,m22,dx,dy),该方法使用一个新的变化矩阵与当前变换矩阵进行乘法运算。
m11
m21
dx
m12
m22
dy
0
0
1
也就是说假设A(x,y)要变换成B(x’,y’)可以通过乘以上述矩阵即可得到。
1 平移context.translate(dx,dy)
x’=x+dx
y’=y+dy
可以使用context.transform (1,0,0,1,dx,dy)代替context.translate(dx,dy)。
也可以使用context.transform(0,1,1,0.dx,dy)代替。
2 缩放context.scale(sx, sy)
x’=sx*x
y’=sy*y
(其中,sx 和sy分别表示在x轴和y轴上的缩放倍数)
可以使用context.transform(sx,0,0,sy,0,0)代替context.scale(sx, sy);
也可以使用context.transform (0,sy,sx,0, 0,0)代替;
3 旋转context.rotate(θ)
x’=x*cosθ-y*sinθ
y’=x*sinθ+y*cosθ
可以用context.transform(Math.cos(θ*Math.PI/180),Math.sin(θ*Math.PI/180),-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180),0,0)替代context.rotate(θ)。
也可以使用context.transform(-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180),Math.cos(θ*Math.PI/180),Math.sin(θ*Math.PI/180), 0,0)替代。
canvas坐标转换屏幕坐标_Canvas坐标系转换相关推荐
- java 坐标系转换_入门-Python-GIS坐标转换
前言 做GIS数据处理的同仁,不可避免的都会遇到坐标转换的问题,也许很多人遇到该问题,马上会使用各类GIS坐标转换的工具软件,甚至是GIS平台,比如ArcGIS,其实除非代转数据是未知坐标系(必须通过 ...
- 广州坐标系转换大地2000_市级2000国家大地坐标转换
丁庆福 周晓 孙栋 摘 要:2000国家大地坐标系是我国建立使用的第一个地心坐标系,根据原国家测绘地理信息局要求,山东省2018年组织开展了全省国土资源数据转换工作,市一级国土资源数据转换需要工作繁杂 ...
- python坐标系转换_GNSS学习笔记-坐标转换
GNSS 坐标转换 GNSS计算主要涉及三个坐标系,地心地固坐标系,地理坐标系和站心坐标系.这里主要介绍一下三个坐标的含义和转换公式. 地心地固坐标系如图X,Y,Z表示 (ECEF坐标系),以地心O为 ...
- java常用地图坐标系转换工具类,支持谷歌,腾讯,百度等主流的地理坐标转换
package com.shen.springboot.redis.util;import java.util.ArrayList; import java.util.HashMap; import ...
- 计算机屏幕坐标系转换,计算机图形窗口到视口坐标转换
本文概述 将对象描述传输到查看参考框架后, 我们选择窗口在查看坐标中延伸, 并在归一化坐标中选择视口限制. 然后将对象描述传输到标准化的设备坐标: 我们使用一种转换来执行此操作, 该转换可保持对象在归 ...
- three.js中坐标系转换以及camera的position、lookAt与up属性理解
为了更好的理解camera的position.lookAt与up属性,文章最开始我们先来阐述three.js的坐标系转换的概念. 1.监听event的事件获得屏幕坐标 文章的最开始首先讨论在哪里进行点 ...
- GNSS系列--GNSS坐标系转换
大部分内容来自<http://onemo10086.com/#/school/article/165> "GNSS定位不准确,漂移了好几公里,是怎么回事呢?"相信有 ...
- threejs中坐标系转换和实现物体跟随鼠标移动
坐标系转换 下面函数可以将鼠标所在点的屏幕坐标转化成一个Threejs三维坐标: convertTo3DCoordinate(clientX,clientY){var mv = new THREE.V ...
- 高德,百度,Google地图定位偏移以及坐标系转换
本文引用地址 一.地图坐标系解释 在进行地图开发过程中,我们一般能接触到以下三种类型的地图坐标系: WGS-84原始坐标系,一般用国际GPS纪录仪记录下来的经纬度,通过GPS定位拿到的原始经纬度,Go ...
最新文章
- 使用ansible来调度cron作业
- Java 线程池详解
- 【Python】青少年蓝桥杯_每日一题_4.15_正方形里面套个实心圆形
- 修复boot分区文件被删除的方法
- 分布式计算框架Gearman原理详解
- MFC中创建和使用线程的方法
- airpods_如何通过AirPods与其他人共享音乐
- c ++向量库_将向量复制到C ++中的另一个向量
- cef如何隐藏html,CefSharp访问加密的HTML/JS/CSS文件
- 红米Note 7 Pro在印度首销迅速售罄
- GitHub#python#:用自组织映射解决旅行商问题
- 10款功能强大的网络嗅探工具应用分析
- 安捷伦or是德信号源+频谱仪操作: 从程控到自动测试 (四)平坦度检测的程控实现
- 雨天美图大法:单图去雨的RESCAN新方式
- 已解决-Excel选择多个单元格,只有计数,没有合计和平均值
- Qos服务质量与IntServ和DiffServ
- JAVA计算机毕业设计网上图书销售系统(附源码、数据库)
- 关于我用过的机械键盘
- 大华监控服务器状态变更,大华监控存储设置教程
- C源码:通过IP地址查找主机名 findip.c