<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.n41++;
m4.n42++;
m4.n43++;
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" />