在html5的畫布上，畫出三維圖形，并且實(shí)現(xiàn)它動(dòng)態(tài)的圍著一條軸進(jìn)行旋轉(zhuǎn)。

實(shí)現(xiàn)步驟：

1、定義一個(gè)對(duì)象Vector3，用于存儲(chǔ)三維的坐標(biāo)

2、定義一個(gè)觀察點(diǎn)坐標(biāo)和顯示屏，初始化觀察點(diǎn)的顯示屏的距離(主要通過他們計(jì)算出各個(gè)點(diǎn)在二維平面的坐標(biāo)值)

3、定義八個(gè)點(diǎn)(為了方便計(jì)算，我將會(huì)是畫布和坐標(biāo)進(jìn)行i平移和旋轉(zhuǎn))

4、通過一定的公式，計(jì)算出八個(gè)點(diǎn)顯示在平面的坐標(biāo)(x,y)

5、使用moveTo和lineTo連接所有的直線

6、定義進(jìn)行旋轉(zhuǎn)的方法(難點(diǎn)，主要使用三維立體計(jì)算出各個(gè)點(diǎn)的推導(dǎo)公式)

7、最后進(jìn)行旋轉(zhuǎn)

3D圖形(3D旋轉(zhuǎn))

body{margin: 0 0 0 0;padding: 0 0 0 0;}

//定義一個(gè)三維矢量類

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;//定義攝像機(jī)和攝像機(jī)距離顯示屏的距離

var eyePosition = new Vector3(0,0,700);//定義眼睛所在的位置

cxt.translate(translateX,translateY);

cxt.scale(1,-1);//是的y的方向相反

//初始化八個(gè)頂點(diǎn)

function init_eight_points(){

//z軸上面的四個(gè)點(diǎn)

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);

//下面四個(gè)點(diǎn)

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個(gè)頂點(diǎn)、攝像機(jī)、攝像機(jī)到顯示屏的距離都已經(jīng)有了。就可以開始計(jì)算八個(gè)頂點(diǎn)到顯示屏上面的x、y坐標(biāo)了

//projection 投射、發(fā)射、推測(cè)

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);

}

}

//已經(jīng)計(jì)算出來了所有點(diǎn)的坐標(biāo)，接下來就是把所有的點(diǎn)的坐標(biāo)連接起來就行

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();

}

//旋轉(zhuǎn)計(jì)算坐標(biāo)的方法 (沿著x軸旋轉(zhuǎn))

function rotate(angle){

//沿著x軸進(jìn)行旋轉(zhuǎn)

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軸進(jìn)行旋轉(zhuǎn)

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軸進(jìn)行旋轉(zhuǎn)

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);

}

}

//計(jì)算角度的方法

function degToRad(a){

return a * Math.PI / 180;

}

//移動(dòng)顯示屏改變其三維投影的圖形

var somethingAsync = eval(Jscex.compile("async", function () {

while (true) {

cxt.clearRect(-translateX,-translateY,canvas.width,canvas.height);//清除畫布

init_eight_points();//初始化所有的點(diǎn)

rotate(degToRad(currentAngle));//旋轉(zhuǎn)角度之后，計(jì)算所有的點(diǎn)坐標(biāo)

currentAngle += 10;//每次以10°的頻率旋轉(zhuǎn)

chang_projection();//計(jì)算所有點(diǎn)在二維平面的上的坐標(biāo)

drawCube();//畫出所有的圖形

$await(Jscex.Async.sleep(100));

}

}));

somethingAsync().start();

總結(jié)

以上是生活随笔為你收集整理的HTML怎么让正方形转动,第十讲：html5中canvas实现正方体的动态旋转的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。