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球体相关推荐

  1. java画球_我的世界 如何用指令画球 JAVA 1.13+

    第一丶 局部坐标 世界坐标被视作绝对坐标.很多命令可以使用波浪号(~)来指定相对坐标,使用插入符(^)来指定局部坐标(也称本地坐标).在波浪号和插入符后可以跟一个数字,表示相对基准点的偏移量.(维基百 ...

  2. java画球_我的世界java版指令画球教程

    我的世界java版如何用指令画球?许多玩家可能还不太清楚吧,下面就为大家带来最新版本下指令画球的详细教程,供各位玩家们参考. 指令画球教程 第一丶 局部坐标 世界坐标被视作绝对坐标.很多命令可以使用波 ...

  3. java 画星星_Java——绘制五角星

    Java2D支持通过GeneralPath实现绘制任意的几何形状. 步骤:1)实例化GeneralPath对象 2)调用moveTo()方法锚地开始点坐标 3)调用lineTo()或curveTo() ...

  4. java画笑脸_canvas 画笑脸

    一个非常有用的函数,而这个函数实际上并不能画出任何东西,也是上面所描述的路径列表的一部分,这个函数就是moveTo() .或者你可以想象一下在纸上作业,一支钢笔或者铅笔的笔尖从一个点到另一个点的移动过 ...

  5. 用java画企鹅_Fireworks绘制简笔QQ企鹅图像

    这里我们使用Fireworks绘制一幅简笔QQ企鹅图像,这里主要熟悉一下工具箱上椭圆.选择.缩放等工具的使用,看看如何通过它们绘制简单的卡通效果.好了,下面我们一起来学习吧! 绘制过程: (1)新建一 ...

  6. java画虚线_Java绘制虚线

    Java绘制虚线 (2013-03-29 17:07:14) 标签: 绘图 虚线 it DashStroke.java ----------------- import java.awt.*; imp ...

  7. 用python画七巧板_canvas绘制七巧板

    效果如下所示: 代码分享: Canvas七巧板 var tangram = [ {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:'#caff67'}, { ...

  8. python绘制3d球体网格散点图

    代码如下 from mpl_toolkits.mplot3d import Axes3D import matplotlib.pyplot as plt import numpy as npfig = ...

  9. java 画多边形_javascript绘制一个多边形

    我想用纯Javascript语言通过鼠标处理程序在画布上绘制很多多边形 . 我的项目是here . 在我的项目中: 我想完成绘制并在双击时创建一个多边形 . (我可以) . 通过一次单击事件开始绘制以 ...

最新文章

  1. 如何理解numpy.nan_to_num
  2. docker $PWD路径_深入浅出Docker 镜像
  3. 机器学习--判别式模型与生成式模型
  4. php数字两位小数_PHP保留两位小数的几种方法
  5. 第五季1:AP模式USB-WIFI网卡移植与测试
  6. console_init_r()函数分析
  7. 关于使用Tomcat服务器出现413错误的解决办法(Request Entity Too Large)
  8. 【java学习之路】(java SE篇)014.Stream API
  9. LeetCode() Reorder List
  10. Hibernate 教程(一)[Hibernate的基本配置]
  11. Mock Server基本使用方法
  12. 教师使用计算机的能力提升,河南省中小学教师信息技术应用能力提升工程实效研究...
  13. 亲民地理第39期-佛山(2)南风古灶
  14. 【FPGA教程案例61】硬件开发板调试1——初识FPGA开发板,通过verilog控制LED灯,按键开关等
  15. “互联网+教育”促进优质资源共享
  16. 【电源专题】回顾:了解LDO的的专业术语与定义 2
  17. 字体在其他浏览器正常在IE8显示字体模糊问题解决
  18. 作为校招loser,我如何在一年半后的社招中咸鱼翻身
  19. Acala与全球知名跨链资产流动平台Ren达成合作
  20. 不用 Spring Security 可否?试试这个小而美的安全框架

热门文章

  1. 西安理工大计算机学院院长,计算机学院研究生段快快自立自强成就自我
  2. 暗云III木马技术分析
  3. L1-039 古风排版(Python3)
  4. react中props验证
  5. Apache知识整理
  6. 淘宝卖家订单速记表selenium +requests爬取 openpyxl +xlrd 操作excel
  7. http-flv协议源码实现(可通过网页播放视频)
  8. json对齐行尾的注释 - 在vscode格式化
  9. 20150818-苹果5刷固件、升4g
  10. 命令模式---烧烤点单