HTML怎么让正方形转动,第十讲:html5中canvas实现正方体的动态旋转
在html5的画布上,画出三维图形,并且实现它动态的围着一条轴进行旋转。
实现步骤:
1、定义一个对象Vector3,用于存储三维的坐标
2、定义一个观察点坐标和显示屏,初始化观察点的显示屏的距离(主要通过他们计算出各个点在二维平面的坐标值)
3、定义八个点(为了方便计算,我将会是画布和坐标进行i平移和旋转)
4、通过一定的公式,计算出八个点显示在平面的坐标(x,y)
5、使用moveTo和lineTo连接所有的直线
6、定义进行旋转的方法(难点,主要使用三维立体计算出各个点的推导公式)
7、最后进行旋转
3D图形(3D旋转)
body{margin: 0 0 0 0;padding: 0 0 0 0;}
//定义一个三维矢量类
Vector3 = function(x,y,z){
this.x = x;
this.y = y;
this.z = z;
}
//
var canvas = document.getElementById('mc');
var cxt = canvas.getContext('2d');
//定义一些常量,用于以后使用
var currentAngle = 0;
var translateX = 300;
var translateY = 300;
var points = [];
var distance = 500;//定义摄像机和摄像机距离显示屏的距离
var eyePosition = new Vector3(0,0,700);//定义眼睛所在的位置
cxt.translate(translateX,translateY);
cxt.scale(1,-1);//是的y的方向相反
//初始化八个顶点
function init_eight_points(){
//z轴上面的四个点
points[0] = new Vector3(100,100,100);
points[1] = new Vector3(100,-100,100);
points[2] = new Vector3(-100,-100,100);
points[3] = new Vector3(-100,100,100);
//下面四个点
points[4] = new Vector3(100,100,-100);
points[5] = new Vector3(100,-100,-100);
points[6] = new Vector3(-100,-100,-100);
points[7] = new Vector3(-100,100,-100);
}
//8个顶点、摄像机、摄像机到显示屏的距离都已经有了。就可以开始计算八个顶点到显示屏上面的x、y坐标了
//projection 投射、发射、推测
function chang_projection(){
for(var i = 0 ;i < points.length ; i++){
points[i].x = points[i].x * distance / Math.abs(eyePosition.z - points[i].z);
points[i].y = points[i].y * distance / Math.abs(eyePosition.z - points[i].z);
}
}
//已经计算出来了所有点的坐标,接下来就是把所有的点的坐标连接起来就行
function drawCube(){
//画出下面的八条虚线
cxt.strokeStyle = "#0FF595";
cxt.lineWidth = 2;
cxt.beginPath();
cxt.moveTo(points[4].x,points[4].y);
cxt.lineTo(points[5].x,points[5].y);
cxt.lineTo(points[6].x,points[6].y);
cxt.lineTo(points[7].x,points[7].y);
cxt.lineTo(points[4].x,points[4].y);
cxt.lineTo(points[0].x,points[0].y);
cxt.moveTo(points[5].x,points[5].y);
cxt.lineTo(points[1].x,points[1].y);
cxt.moveTo(points[6].x,points[6].y);
cxt.lineTo(points[2].x,points[2].y);
cxt.moveTo(points[7].x,points[7].y);
cxt.lineTo(points[3].x,points[3].y);
cxt.moveTo(points[0].x,points[0].y);
cxt.lineTo(points[1].x,points[1].y);
cxt.lineTo(points[2].x,points[2].y);
cxt.lineTo(points[3].x,points[3].y);
cxt.lineTo(points[0].x,points[0].y);
cxt.stroke();
}
//旋转计算坐标的方法 (沿着x轴旋转)
function rotate(angle){
//沿着x轴进行旋转
for (i = 0; i < points.length; i++) {
var tempY = points[i].y;
points[i].y = points[i].y * Math.cos(angle) - points[i].z * Math.sin(angle);
points[i].z = tempY * Math.sin(angle) + points[i].z * Math.cos(angle);
}
//沿着y轴进行旋转
for (var i = 0; i < points.length; i++) {
var tempX = points[i].x;
points[i].x = points[i].x * Math.cos(angle) - points[i].z * Math.sin(angle);
points[i].z = points[i].z * Math.cos(angle) + tempX * Math.sin(angle);
}
//沿着z轴进行旋转
for(var i = 0 ; i < points.length ; i++){
var tempX = points[i].x;
var tempY = points[i].y;
points[i].x = tempX * Math.cos(angle) - tempY * Math.sin(angle);
points[i].y = tempX * Math.sin(angle) + tempY * Math.cos(angle);
}
}
//计算角度的方法
function degToRad(a){
return a * Math.PI / 180;
}
//移动显示屏改变其三维投影的图形
var somethingAsync = eval(Jscex.compile("async", function () {
while (true) {
cxt.clearRect(-translateX,-translateY,canvas.width,canvas.height);//清除画布
init_eight_points();//初始化所有的点
rotate(degToRad(currentAngle));//旋转角度之后,计算所有的点坐标
currentAngle += 10;//每次以10°的频率旋转
chang_projection();//计算所有点在二维平面的上的坐标
drawCube();//画出所有的图形
$await(Jscex.Async.sleep(100));
}
}));
somethingAsync().start();
HTML怎么让正方形转动,第十讲:html5中canvas实现正方体的动态旋转相关推荐
- 计算机基础知识第十讲,计算机文化基础(第十讲)学习笔记
计算机文化基础(第十讲)学习笔记 采样和量化PictureElement Pixel(像素)(链接: 采样的实质就是要用多少点(这个点我们叫像素)来描述一张图像,比如,一幅420x570的图像,就表示 ...
- 《突破C#编程实例五十讲》源文件下载(2)
上接<<突破C#编程实例五十讲>源文件下载(1)> 有兴趣的朋友下载看看吧,一共有9个压缩包分3篇文章,下载要注意哦,不然解压要出错哦! 转载于:https://blog.51 ...
- 趣谈网络协议笔记-二(第十讲)
趣谈网络协议笔记-二(第十讲) UDP协议:因性善而简单,难免碰到"城会玩" 自勉 如果手上没有剑,我就无法保护你.如果我一直握着剑,我就无法抱紧你.--<Bleach> ...
- JSP快速入门教程——全十讲
第一讲(参考<Java Web程序设计基础教程>第1章) 1 JSP 和 Java的关系 一般Java指的标注版 Java SE 另外两个版本:Java EE 和 Java ME J ...
- 第十讲:Obj-C Blocks 应用
转:http://tigercat1977.blog.163.com/blog/static/2141561122012111295955891/ 第十讲:Obj-C Blocks 应用 2012-1 ...
- 逆向知识第十讲,循环在汇编中的表现形式,以及代码还原
逆向知识第十讲,循环在汇编中的表现形式,以及代码还原 一丶do While在汇编中的表现形式 1.1高级代码: #include "stdafx.h"int main(int ar ...
- 实用防火与防爆技术培训---第十讲 可燃气体的燃爆特性
第十讲 可燃气体的燃爆特性 一.燃烧方式 气体的燃烧与液体和固体的燃烧不同,它不需要经过蒸发.熔化等过程,气体在正常状态下就可具有燃烧条件,所以比液体和固体都容易燃烧.有扩散燃烧和动力燃烧两种形式. ...
- 动手学ocr·十讲--学习笔记一
动手学ocr·十讲 技术导论 课程链接请点击这里 1.1 OCR技术背景: OCR是什么 OCR(Optical Character Recognition,光学字符识别)是计算机视觉重要方向之一.传 ...
- 《可转债入门十讲》笔记
可转债入门十讲 01.可转债基础知识(上) 定义 可转换公司债券,是指其持有者可以在一定时期内按一定比例或价格,将之转换成一定数量股票的公司债券. 预期收益 历史最高价:3618.188,历史最低价6 ...
最新文章
- darknet53网络结构及配置文件对比
- 求最小Hamming距离的DNA序列
- python文件中数字排序_Python 对输入的数字进行排序的方法
- 泛域名Wildcard Domain
- matlab求解极限与倒数,matlab实验二__极限与导数
- OpenCV模板匹配Template Matching
- 初探CSRF在ASP.NET Core中的处理方式
- 深入研究 C++中的 STL Deque 容器
- 多旋翼飞行器控制的难点
- 队列消息在html中怎么排列,Redis实现消息队列
- 张广慧:云计算对游戏开发者的价值
- db2 删除索引_程序员必须了解的知识点——你搞懂mysql索引机制了吗?
- pytorch教程之nn.Sequential类详解——使用Sequential类来自定义顺序连接模型
- 数据平台作业调度系统详解-理论篇
- 可以嵌入ppt的课堂点名器_学点云课堂:小班课应用场景,饱受青睐的秘诀
- ffmpeg 为取经而来_取经路上的妖魔鬼怪,傻傻分不清楚
- 计算机cpu风扇关闭,cpu风扇怎么关闭
- 什么是API,开发人员该如何使用它们?
- 电子信息工程求职目标_应用电子专业求职信范文合集6篇
- 《程序员的成长课》:少走5年弯路
热门文章
- spark shuffle再补充
- 使用Lombok简化开发及无效解决方案
- leetcode 377. Combination Sum IV | 377. 组合总和 Ⅳ(动态规划)
- leetcode 463. 岛屿的周长(Java版)
- 多线程与高并发(九):单机压测工具JMH,单机最快MQ - Disruptor原理解析
- 【PAT甲级 链表去重】1097 Deduplication on a Linked List (25 分) C++ 全部AC
- 【Java/JFrame/多线程】小球碰到边缘的回弹效果
- Leet Code OJ 70. Climbing Stairs [Difficulty: Easy]
- 操作系统中的同步和异步
- 【两种解法】基础实验4-2.2 列出叶结点 (25 分)