<script language="javascript" type="text/javascript" src="http://files.cnblogs.com/zhanglei644213943/uglifyjs-parser.js"></script> <script language="javascript" type="text/javascript" src="http://files.cnblogs.com/zhanglei644213943/jscex.js"></script> <script language="javascript" type="text/javascript" src="http://files.cnblogs.com/zhanglei644213943/jscex.builderBase.js"></script> <script language="javascript" type="text/javascript" src="http://files.cnblogs.com/zhanglei644213943/jscex.async.js"></script> <script src="http://files.cnblogs.com/iamzhanglei/easel.js" type="text/javascript"></script> <!--[if IE]> <script language="javascript" type="text/javascript" src="http://files.cnblogs.com/zhanglei644213943/json2.js"></script> <script language="javascript"> Jscex.config.codeGenerator = function (code) { return "false || " + code; } </script> <![endif]--><div style="border-bottom: #222 15px solid; border-left: #222 15px solid; background-color: #111; color: #ccc; border-top: #222 15px solid; border-right: #222 15px solid"><canvas id="myCanvas4" width="700" height="500">Your browser does not support the canvas element. </canvas></div> <script> var canvas; var stage; var txt; var shape; var count = 0; function init() { canvas = document.getElementById("myCanvas4"); stage = new Stage(canvas); // Create a new Text object, and position it on stage: txt = new Text("text on the canvas... 0!", "16px Arial", "#FFF"); txt.textBaseline = "top"; // draw text relative to the top of the em box. txt.x = 10; txt.y = 10; // txt.rotation = 20; //txt.outline = true; stage.addChild(txt); txt2 = new Text("text on the canvas... 0!", "16px Arial", "#FFF"); txt2.textBaseline = "top"; // draw text relative to the top of the em box. txt2.x = 10; txt2.y = 30; stage.addChild(txt2); txt3 = new Text("text on the canvas... 0!", "16px Arial", "#FFF"); txt3.textBaseline = "top"; // draw text relative to the top of the em box. txt3.x = 10; txt3.y = 50; stage.addChild(txt3); txt4 = new Text("text on the canvas... 0!", "16px Arial", "#FFF"); txt4.textBaseline = "top"; // draw text relative to the top of the em box. txt4.x = 10; txt4.y = 70; stage.addChild(txt4); // this shape will be the background for the text: shape = new Shape(); shape.x = txt.x; shape.y = txt.y; shape.rotation = txt.rotation; stage.addChildAt(shape, 0); txt.text = "text on the canvas... " + count + "!"; shape.graphics.clear().drawRect(-10, -10, txt.getMeasuredWidth() + 20, 36 + 20); stage.update(); } init(); </script> <script> var Matrix4 = function (n11, n12, n13, n14, n21, n22, n23, n24, n31, n32, n33, n34, n41, n42, n43, n44) { this.set( n11 || 1, n12 || 0, n13 || 0, n14 || 0, n21 || 0, n22 || 1, n23 || 0, n24 || 0, n31 || 0, n32 || 0, n33 || 1, n34 || 0, n41 || 0, n42 || 0, n43 || 0, n44 || 1 ); } Matrix4.prototype = { constructor: Matrix4, set: function (n11, n12, n13, n14, n21, n22, n23, n24, n31, n32, n33, n34, n41, n42, n43, n44) { this.n11 = n11; this.n12 = n12; this.n13 = n13; this.n14 = n14; this.n21 = n21; this.n22 = n22; this.n23 = n23; this.n24 = n24; this.n31 = n31; this.n32 = n32; this.n33 = n33; this.n34 = n34; this.n41 = n41; this.n42 = n42; this.n43 = n43; this.n44 = n44; return this; }, restore: function () { this.set( 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ); return this; }, multiplyVector4: function (v) { var vx = v.x, vy = v.y, vz = v.z, vw = v.w; v.x = this.n11 * vx + this.n21 * vy + this.n31 * vz + this.n41 * vw; v.y = this.n12 * vx + this.n22 * vy + this.n32 * vz + this.n42 * vw; v.z = this.n13 * vx + this.n23 * vy + this.n33 * vz + this.n43 * vw; v.w = this.n14 * vx + this.n24 * vy + this.n34 * vz + this.n44 * vw; return v; }, copy: function (m) { this.set( m.n11, m.n12, m.n13, m.n14, m.n21, m.n22, m.n23, m.n24, m.n31, m.n32, m.n33, m.n34, m.n41, m.n42, m.n43, m.n44 ); return this; } }; </script> <script type="text/javascript"> var cxt4 = canvas.getContext("2d"); cxt4.lineWidth = 3; var Points4 = new Array(); var startX4 = 250; var startY4 = 250; var distance3 = 500; var eyePosition4 = { x: 0, y: 0, z: 700 }; function init4() { Points4[0] = { x: 100, y: 100, z: 100 ,w:1}; Points4[1] = { x: 100, y: 100, z: -100, w: 1 }; Points4[2] = { x: -100, y: 100, z: -100, w: 1 }; Points4[3] = { x: -100, y: 100, z: 100, w: 1 }; Points4[4] = { x: 100, y: -100, z: 100, w: 1 }; Points4[5] = { x: 100, y: -100, z: -100, w: 1 }; Points4[6] = { x: -100, y: -100, z: -100, w: 1 }; Points4[7] = { x: -100, y: -100, z: 100, w: 1 }; } var m4 = new Matrix4(); var angle = 0; var currentAngle4 = 0; function transform() { angle = degToRad(currentAngle4) init4(); m4.n11 += 0.01; m4.n22 += 0.01; m4.n33 += 0.01; for (var i = 0; i < Points4.length; i++) { Points4[i]= m4.multiplyVector4(Points4[i]); } } function changedistance4() { for (var i = 0; i < Points4.length; i++) { Points4[i].x = Points4[i].x * distance3 / Math.abs(eyePosition4.z - Points4[i].z); Points4[i].y = Points4[i].y * distance3 / Math.abs(eyePosition4.z - Points4[i].z); } } var drawCube4 = function () { transform(); // if (currentAngle4 > 360) currentAngle4 = 0; txt.text = m4.n11 + "_" + m4.n12 + "_" + m4.n13 + "_" + m4.n14; txt2.text = m4.n21 + "_" + m4.n22 + "_" + m4.n23 + "_" + m4.n24; txt3.text = m4.n31 + "_" + m4.n32 + "_" + m4.n33 + "_" + m4.n34; txt4.text = m4.n41 + "_" + m4.n42 + "_" + m4.n43 + "_" + m4.n44; shape.graphics.clear().drawRect(-10, -10, txt.getMeasuredWidth() + 20, 36 + 20); stage.update(); cxt4.clearRect(100, 100, 1200, 1200); //init4(); //rotate4(degToRad(currentAngle4)) changedistance4(); cxt4.strokeStyle = randomColor(); cxt4.beginPath(); cxt4.moveTo(startX4 + Points4[0].x, startY4 - Points4[0].y); cxt4.lineTo(startX4 + Points4[1].x, startY4 - Points4[1].y); cxt4.lineTo(startX4 + Points4[2].x, startY4 - Points4[2].y); cxt4.lineTo(startX4 + Points4[3].x, startY4 - Points4[3].y); cxt4.lineTo(startX4 + Points4[0].x, startY4 - Points4[0].y); cxt4.moveTo(startX4 + Points4[4].x, startY4 - Points4[4].y); cxt4.lineTo(startX4 + Points4[5].x, startY4 - Points4[5].y); cxt4.lineTo(startX4 + Points4[6].x, startY4 - Points4[6].y); cxt4.lineTo(startX4 + Points4[7].x, startY4 - Points4[7].y); cxt4.lineTo(startX4 + Points4[4].x, startY4 - Points4[4].y); cxt4.moveTo(startX4 + Points4[1].x, startY4 - Points4[1].y); cxt4.lineTo(startX4 + Points4[5].x, startY4 - Points4[5].y); cxt4.moveTo(startX4 + Points4[0].x, startY4 - Points4[0].y); cxt4.lineTo(startX4 + Points4[4].x, startY4 - Points4[4].y); cxt4.moveTo(startX4 + Points4[2].x, startY4 - Points4[2].y); cxt4.lineTo(startX4 + Points4[6].x, startY4 - Points4[6].y); cxt4.moveTo(startX4 + Points4[3].x, startY4 - Points4[3].y); cxt4.lineTo(startX4 + Points4[7].x, startY4 - Points4[7].y); cxt4.stroke(); } drawCube4() var rotate4Async = eval(Jscex.compile("async", function () { //当摄像机到显示屏的距离大于750,退出循环 while (Points4[0].z<300) { currentAngle4 += 5; drawCube4(); $await(Jscex.Async.sleep(100)); } })); function degToRad(a) { return (a / (360 / (2 * Math.PI))); } //旋转 function rotate4(angle) { for (var i = 0; i < Points4.length; i++) { var tempX = Points4[i].x; var tempZ = Points4[i].z; Points4[i].x = Points4[i].x * Math.cos(angle) - Points4[i].z * Math.sin(angle); Points4[i].z = Points4[i].z * Math.cos(angle) + tempX * Math.sin(angle); } for (var i = 0; i < Points4.length; i++) { var tempY = Points4[i].y; Points4[i].y = Points4[i].z * Math.sin(angle) - Points4[i].y * Math.cos(angle); Points4[i].z = tempY * Math.sin(angle) + Points4[i].z * Math.cos(angle); } } function randomColor() { //16进制方式表示颜色0-F var arrHex = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"]; var strHex = "#"; var index; for (var i = 0; i < 6; i++) { //取得0-15之间的随机整数 index = Math.round(Math.random() * 15); strHex += arrHex[index]; } return strHex; } </script> <div id="show"> </div> <input type="button" onclick="rotate4Async().start();" value="开始变换" style="width: 135px" />