java画球_canvas绘制3d球体
window.οnlοad=function(){
var R_init=500
var Sum=360/10 //定义12个环形的圈圈
var Sumy=360/10 //纵向也有12个圈圈
var radius=2 //居中半径
var r_add=2 //半径增量
var scen=20 //视角长度
var off=600 //canvas偏移
var R=500/(scen+R_init)*500 //定义大圆半径,随着视角变大而变小
/**
* 获取canvas对象
*/
var can=document.getElementById("canvasId")
var width=can.getAttribute("width")
var height=can.getAttribute("height")
var canvas=can.getContext("2d")
// canvas.scale(1.2,1.2)
canvas.lineWidth=1
canvas.scale(2,2)
/**
*重写数组方法
*/
Array.prototype.forEach=function(callback){
for(var i=0;i
callback.call(this[i])
}
}
/**
* 定义一个球体对象
*/
var Cube=function(points){
this.points=points
}
Cube.prototype={
_draw:function(){
canvas.strokeStyle="#aaaaff"
this.points.forEach(function(){
canvas.beginPath()
canvas.arc(this.x+off,this.y+off,this.radius,0,2*Math.PI)
canvas.stroke()
})
},
transform:function(angleX,angleY){
canvas.clearRect(0,0,width,height)
rotateY(this.points,angleY)
rotateX(this.points,angleX)
this._draw()
},
transformX:function(angleZ){
canvas.clearRect(0,0,4000,3000)
rotateX(this.points,angleZ)
this._draw()
}
,
transformY:function(angleZ){
canvas.clearRect(0,0,1000,1000)
rotateY(this.points,angleZ)
this._draw()
},
_print:function(){
console.log(this.points.length)
},
_resizeCamera:function(){
//重置视角,重置坐标点,没写完
}
}
/**
* 定义一些圆圈
*/
var point = function(x,y,z,radius){
this.x = x
this.y = y
this.z = z
this.radius=radius
this.changeZ=function(){
this.z=0-this.z
this.radius=radius+r_add*Math.sqrt(Math.pow(R+scen-this.z,2)+Math.pow(this.y,2))/(scen+R)
return this
}
}
//初始化球上面的圆圈
function init(){
var points=[]
for(var i=0;i
for(var e=0;e
var x=Math.cos(i*Math.PI*2/Sum)*Math.sin(e*Math.PI*2/Sumy)*R
var y=Math.cos(e*Math.PI*2/Sumy)*R
var z=0
if((e/Sumy>.5)||(i/Sum)>.5){
z=0-Math.sqrt(Math.pow(R,2)-Math.pow(x,2)-Math.pow(y,2))
}else{
z=Math.sqrt(Math.pow(R,2)-Math.pow(x,2)-Math.pow(y,2))
}
var r=radius+r_add*Math.sqrt(Math.pow(R+scen-z,2)+Math.pow(y,2))/(scen+R)
console.log(x,y,z,r)
var p=new point(x,y,z,r)
points.push(p)
}
}
return points
}
//沿着Z轴旋转
function rotateZ(points,angleY){
var cos=Math.cos(angleY)
var sin=Math.sin(angleY)
points.forEach(function(){
var x1=this.x*cos-this.y*sin
var y1=this.y*cos+this.x*sin
this.x=x1
this.y=y1
})
}
function rotateX(points,angleY){
var cos=Math.cos(angleY)
var sin=Math.sin(angleY)
points.forEach(function(){
var y1=this.y*cos-this.z*sin
var z1=this.y*sin+this.z*cos
this.y=y1
this.z=z1
})
}
function rotateY(points,angleY){
var cos=Math.cos(angleY)
var sin=Math.sin(angleY)
points.forEach(function(){
var z1=this.z*cos-this.x*sin
var x1=this.z*sin+this.x*cos
this.z=z1
this.x=x1
})
}
var pos=init()
var c=new Cube(pos)
//c._clone()
c._draw()
//鼠标事件,有点问题
var x_=1000
var y_=1000
window.οnmοusemοve=function(e){
var rx=e.pageX
var ry=e.pageY
var deltaX=rx-x_
var deltaY=ry-y_
c.transform(deltaY/8000*Math.PI,-deltaX/8000*Math.PI)
x_=rx
y_=ry
}
}
java画球_canvas绘制3d球体相关推荐
- java画球_我的世界 如何用指令画球 JAVA 1.13+
第一丶 局部坐标 世界坐标被视作绝对坐标.很多命令可以使用波浪号(~)来指定相对坐标,使用插入符(^)来指定局部坐标(也称本地坐标).在波浪号和插入符后可以跟一个数字,表示相对基准点的偏移量.(维基百 ...
- java画球_我的世界java版指令画球教程
我的世界java版如何用指令画球?许多玩家可能还不太清楚吧,下面就为大家带来最新版本下指令画球的详细教程,供各位玩家们参考. 指令画球教程 第一丶 局部坐标 世界坐标被视作绝对坐标.很多命令可以使用波 ...
- java 画星星_Java——绘制五角星
Java2D支持通过GeneralPath实现绘制任意的几何形状. 步骤:1)实例化GeneralPath对象 2)调用moveTo()方法锚地开始点坐标 3)调用lineTo()或curveTo() ...
- java画笑脸_canvas 画笑脸
一个非常有用的函数,而这个函数实际上并不能画出任何东西,也是上面所描述的路径列表的一部分,这个函数就是moveTo() .或者你可以想象一下在纸上作业,一支钢笔或者铅笔的笔尖从一个点到另一个点的移动过 ...
- 用java画企鹅_Fireworks绘制简笔QQ企鹅图像
这里我们使用Fireworks绘制一幅简笔QQ企鹅图像,这里主要熟悉一下工具箱上椭圆.选择.缩放等工具的使用,看看如何通过它们绘制简单的卡通效果.好了,下面我们一起来学习吧! 绘制过程: (1)新建一 ...
- java画虚线_Java绘制虚线
Java绘制虚线 (2013-03-29 17:07:14) 标签: 绘图 虚线 it DashStroke.java ----------------- import java.awt.*; imp ...
- 用python画七巧板_canvas绘制七巧板
效果如下所示: 代码分享: Canvas七巧板 var tangram = [ {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:'#caff67'}, { ...
- python绘制3d球体网格散点图
代码如下 from mpl_toolkits.mplot3d import Axes3D import matplotlib.pyplot as plt import numpy as npfig = ...
- java 画多边形_javascript绘制一个多边形
我想用纯Javascript语言通过鼠标处理程序在画布上绘制很多多边形 . 我的项目是here . 在我的项目中: 我想完成绘制并在双击时创建一个多边形 . (我可以) . 通过一次单击事件开始绘制以 ...
最新文章
- 如何理解numpy.nan_to_num
- docker $PWD路径_深入浅出Docker 镜像
- 机器学习--判别式模型与生成式模型
- php数字两位小数_PHP保留两位小数的几种方法
- 第五季1:AP模式USB-WIFI网卡移植与测试
- console_init_r()函数分析
- 关于使用Tomcat服务器出现413错误的解决办法(Request Entity Too Large)
- 【java学习之路】(java SE篇)014.Stream API
- LeetCode() Reorder List
- Hibernate 教程(一)[Hibernate的基本配置]
- Mock Server基本使用方法
- 教师使用计算机的能力提升,河南省中小学教师信息技术应用能力提升工程实效研究...
- 亲民地理第39期-佛山(2)南风古灶
- 【FPGA教程案例61】硬件开发板调试1——初识FPGA开发板,通过verilog控制LED灯,按键开关等
- “互联网+教育”促进优质资源共享
- 【电源专题】回顾:了解LDO的的专业术语与定义 2
- 字体在其他浏览器正常在IE8显示字体模糊问题解决
- 作为校招loser,我如何在一年半后的社招中咸鱼翻身
- Acala与全球知名跨链资产流动平台Ren达成合作
- 不用 Spring Security 可否?试试这个小而美的安全框架