html5 canvas获取坐标系,HTML5 Canvas球坐标系投影到二维直角坐标系实例演示
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
function g(e) {
return document.getElementById(e);
}
var random = function() {
return (Math.random() * 10 >> 0) / 10;
}
var ctx = g('pad').getContext('2d');
ctx.scale(100, 100);
ctx.lineWidth = 0.002;
ctx.lineJoin = "round";
var Ball = function(x, y, r) {
this.theta = 0; //球坐标转角
this.eleva = 0; //球坐标仰角
this.radius = r || 1; //球坐标半径
this.pos = { //球坐标原点
x: x || 2,
y: y || 2
};
this.co = { //二维上的投影坐标
x: 0,
y: 0
};
this.col = { //颜色
r: 255,
g: 255,
b: 255,
a: 0.6
};
this.init = function() {
ctx.translate(this.pos.x, this.pos.y);
this.preview();
};
this.init();
};
/* 球坐标系转平面直角坐标系 */
Ball.prototype.iso = function(a, b, r) {
var x, y, z
x = r * Math.cos(a + this.theta) * Math.sin(b);
y = r * Math.sin(a + this.theta) * Math.sin(b);
z = r * Math.cos(b);
var fact = (y * Math.cos(this.eleva) + z * Math.sin(this.eleva) + 8) / 8;
y = y * Math.sin(this.eleva) + z * Math.cos(this.eleva);
x *= fact;
y *= fact;
return {
x: x,
y: y
};
}
Ball.prototype.preview = function() {
ctx.strokeStyle = 'rgba(' + this.col.r + ',' + this.col.g + ',' + this.col.b + ',' + this.col.a + ')';
ctx.clearRect(-2, -2, 4, 4);
ctx.beginPath();
this.sphere();
ctx.stroke();
}
Ball.prototype.sphere = function() {
var a, b;
for (a = 0; a < 2 * Math.PI; a += Math.PI / 12) {
for (b = 0; b < 2 * Math.PI; b += Math.PI / 12) {
if (b == 0 || b * 100 >> 0 == Math.PI * 100 >> 0 || b * 100 >> 0 == 2 * Math.PI * 100 >> 0) continue; /* 排除一些仰角(接近)为0/PI/2PI的点. */
this.co = this.iso(0, 0, 0);
ctx.moveTo(this.co.x, this.co.y);
this.co = this.iso(a, b, this.radius);
ctx.lineTo(this.co.x, this.co.y);
}
}
}
Ball.prototype.fluc = function() {
var that = this;
setInterval(function() {
that.theta += random() / 20;
that.eleva += random() / 20;
that.radius += (random() / 10 - 0.05);
if (that.radius < 0.5 || that.radius > 2) that.radius = 1;
that.preview();
}, 100)
};
new Ball(2, 2, 1).fluc();
html5 canvas获取坐标系,HTML5 Canvas球坐标系投影到二维直角坐标系实例演示相关推荐
- canvas绘制海报分享,海报中设置圆角二维码
canvas绘制海报分享,海报中设置圆角二维码,背景图,动态的文字,绘制完成以后保存为图片,可长按分享海报图片. 下面看看效果图:(假设教师的图片是二维码) 这其中,背景图元素,还有教师的图片(假设是 ...
- QRCode 扫描二维码、扫描条形码、相册获取图片后识别、生成带 Logo 二维码、支持微博微信 QQ 二维码扫描样式...
QRCode 扫描二维码.扫描条形码.相册获取图片后识别.生成带 Logo 二维码.支持微博微信 QQ 二维码扫描样式 参考链接:https://github.com/bingoogolapple/B ...
- Asp.net 获取泛微OA个人信息并生成二维码名片vCard
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.二维码名片vCard是什么? 二.使用步骤 1.引入库 2.读取OA数据 3.生成名片 4.名片效果 前言 记录学 ...
- java获取微信小程序码和小程序二维码
一.小程序码和小程序二维码简介 首先,奉上微信官方文档:获取小程序码 - https://developers.weixin.qq.com/miniprogram/dev/framework/open ...
- html5 canvas获取坐标,HTML5 canvas坐标
在canvas当中有一个特殊的东西叫做"坐标"!没错,就是平时所熟知的坐标体系.canvas拥有自己的坐标体系,从最上角0, 0开始,X向右是增大,Y向下是增大.也可以借助CSS当 ...
- html5 判断获取定位,HTML5利用Geolocation API获取地理位置定位功能
如何使用html5地理位置定位功能 定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确.首先我们要检测用 ...
- 扫描二维码、扫描条形码、相册获取图片后识别、生成带 Logo 二维码、支持微博微信 QQ 二维码扫描样式
GitHub项目的链接地址 目录 功能介绍 常见问题 效果图与示例 apk Gradle 依赖 布局文件 自定义属性说明 接口说明 关于我 功能介绍 ZXing 生成可自定义颜色.带 logo 的二维 ...
- HTML5两个画布如何弄,有趣html5(两)----使用canvas结合剧本画在画布上的简单图(html5另一个强大)...
请珍惜劳动小编成果,这篇文章是原来小编,转载请注明出处. 于html5中能够使用canvas标签在画布上绘图,先直接上代码,这篇文章先简介一下canvas的用法.简单画几个圆,矩形,三角形,写字. 在 ...
- 小程序开发-利用canvas实现保存二维码海报到本机
场景及需求 在小程序开发过程中,经常需要实现保存某个页面为带小程序码的二维码海报图片到本地,然后用于分享或者发朋友圈等操作. 主要技术点及小程序相关api 技术注意事项 小程序的canvas与H5 c ...
最新文章
- Centos7 nginx 虚拟主机、反向代理服务器及负载均衡,多台主机分离php-fpm实验
- Palo Doris版五分钟快速入门
- cad线性标注命令_CAD线性标注如何使用的
- 【SLAM】安装 g2o_viewer
- java操作solr基本方法
- 一些关于大数据的总结
- 华为机试HJ99:自守数(附带提速方案)
- DWM1000 Blink结构 -- 帧过滤第一节
- API多帐户跨平台MT4跟单系统如何选择服务器?
- MPEG4写为avi文件
- 怎么在国内创建谷歌账号_如何在Google Wifi上创建和使用家庭标签
- word文档在程序未响应的情况下强行关闭未保存怎么恢复?
- C++ 解决多对一问题
- jQuery插件开发实战
- 局域网访问mysql失败_局域网中mysql连接失败
- 代理模式(委托模式)— 结构型
- 教你保护相册里的「小秘密」,如何在 iPhone 和 iPadOS 中隐藏照片
- 微信图片转文字的方法有哪些
- 上市公司杰创智能携手甄云,启动供应链采购数字化升级
- 一人最高能拿2500万!新基石研究员名单公布,刘若川段路明陆朝阳上榜,川大哈工大南大均有入选...