canvas与webgl坐标转换
1 canvas的坐标系
坐标原点在左上角,横轴向右为X轴正方向,竖直向下为Y轴正方向

2 webgl的坐标系
坐标原点在绘图区域的中心点,横向右为X轴正方向,竖直向上为Y轴正方向,横纵坐标区域范围为(-1,1)

3 坐标转换
鼠标在浏览器客户区点击的位置为:(event.clientX,event.clientY)
那么在canvas中的坐标(x,y)就是:
var rect = event.target.getBoundingClientRect();
x = event.clientX-rect.left;
y = - (event.clientY-rect.top);
其中rect.left是canvas左边界距离浏览器客户区左边界的位置,rect.top是canvas上边界距离浏览器客户区上边界的位置,注意y坐标加符号是因为canvas中Y轴向下为正方向在webgl中的坐标位置(x,y)则为:
x = ( (event.clientX-rect.left) -canvas.width/2 )/(canvas.width/2);
y = (canvas.height/2 - (event.clientY-rect.top))/(canvas.height/2);
利用上一步从canvas坐标系转换到webgl坐标系,主要的工作就是需要将坐标范围映射到(-1,1)的范围,其次是注意webgl中Y轴向上是正方向
canvas与webgl坐标转换的更多相关文章
- canvas svg webgl threejs d3js 的区别
canvas 绘制2D位图. Echarts是基于Canvas技术的可视化工具,底层封装了原生的JavaScript的绘图 API. canvas里面绘制的图形不能被引擎抓取,canvas中我们绘制图 ...
- CSS3、SVG、Canvas、WebGL动画精选整理
一.CSS3动画 名称 用途 链接 阴影波纹特效 1.元素hover效果 2.突出表现效果 http://www.jq22.com/code80 横板导航菜单动画 导航菜单 http://www.jq ...
- 八大疯狂的HTML5 Canvas及WebGL动画效果——8 CRAZY ANIMATIONS WITH WEBGL AND HTML5 CANVAS【收藏】
HTML5, WebGL and Javascript have changed the way animation used to be. Past few years, we can only a ...
- canvas之webgl的打开方式
OK,一个完整的dome是从无到有的.这篇文章将记录我的webgl之旅.不定时更新. 首先,新建一个canvas元素. 然后获取到它. var e = document.ElementById('ca ...
- canvas之webgl的浏览器开启方式
引自百度知道的回答 1.开启方式: 第一种:打开cmd,切换到Chorme的安装目录,敲入chrome.exe --enable -webgl,回车就会打开一个chrome浏览器窗口: 第二种:找到C ...
- 【JavaScript】SVG vs Canvas vs WebGL
参考资料: http://blog.csdn.net/lufy_legend/article/details/38292125 http://zhidao.baidu.com/link?url=e4n ...
- 【GISER&&Painter】Chapter01:WebGL渲染初体验
基于上一篇OpenGL的渲染原理,这两周又陆续接触了一些关于WebGL绘图的一些内容,因为刚入门,很多东西又很晦涩,所以特意花了小半天的时间整理了一下,特此记录. 零 画一个多边形吧! 把一个多边形 ...
- WebGL入门教程(二)-webgl绘制三角形
前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用web ...
- WebGL入门教程(一)-初识webgl
一.WebGL和传统网页的区别: 普通网页组成成分:HTML.JavaScript: WebGL网页组成成分:HTML5.JavaScript和GLSL ES(着色器语言 OpenGL ES): 二. ...
随机推荐
- 十八、Memento 备忘录设计模式
原理: 代码清单: Memento public class Memento { int mondey; ArrayList fruits; Memento(int mondey){ this.mon ...
- python获取文件夹的大小(即取出所有文件计算大小)
import os path = r'/Users/authurchen/PycharmProjects/Demo' # print(os.listdir(path)) ls = os.listdir ...
- zabbix-3.4.10系列
第1节 zabbix体系架构图:
- Python中import, from...import,import...as的区别
import datetime print(datetime.datetime.now()) 以上代码实现输出系统当前时间,是引入整个datetime包,然后再调用datetime这个类中的now() ...
- jq获取图片并转换为base64
html代码: <input type="file" id="file1"/> jq代码: $('#file1').change(function( ...
- ggplot2 梯度作图
ggplot2是R语言的绘图包 library('ggplot2') df <- data.frame(var=c("a","b","c&quo ...
- 机器学习(二)--------单变量线性回归(Linear Regression with One Variable)
面积与房价 训练集 (Training Set) Size Price 2104 460 852 178 ...... m代表训练集中实例的数量x代表输入变量 ...
- JS的事件流的概念(重点)
09-JS的事件流的概念(重点) 在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文 事件的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件 ...
- Python中的urllib
urllib提供了一系列URL的功能. Get urllib的request模块可以非常方便的抓取URL内容,也就是发送一个GET请求到指定的页面,然后返回HTTP响应: 例如,对豆瓣的一个URLht ...
- JavaScript 高阶函数
高阶函数的英文叫Higher-order function ,什么是高阶函数呢>? JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接 ...