android canvans 画3d,Canvas 3D梯形

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var w = c.width = window.innerWidth,

h = c.height = window.innerHeight,

ctx = c.getContext('2d'),

fl = 250,

vp = {

x: w / 2,

y: h / 2

},

pts = [

[-1 * fl, .5 * fl, -1 * fl],

[-1 * fl, .5 * fl, 1 * fl],

[1 * fl, .5 * fl, 1 * fl],

[1 * fl, .5 * fl, -1 * fl]

],

dPts = [],

rx = 3,

ry = 2,

rxCos = 1,

rxSin = 0,

ryCos = 1,

rySin = 0;

function dimensionize(x, y, z) {

var obj = {};

var x1 = x;

x = x * rxCos - y * rxSin;

y = y * rxCos + x1 * rxSin;

var x1 = x;

x = x * ryCos - z * rySin;

z = z * ryCos + x1 * rySin;

z += fl * 2;

var scale = fl / (fl + z);

obj.x = vp.x + x * scale;

obj.y = vp.y + y * scale;

return obj;

}

function anim() {

window.requestAnimationFrame(anim);

rxCos = Math.cos(rx);

rxSin = Math.sin(rx);

ryCos = Math.cos(ry);

rySin = Math.sin(ry);

ctx.fillStyle = 'black';

ctx.fillRect(0, 0, w, h);

ctx.strokeStyle = 'white';

ctx.lineWidth = 3;

dPts.length = 0;

for (var i = 0; i < pts.length; ++i) {

var p = pts[i];

dPts.push(dimensionize(p[0], p[1], p[2]));

dPts.push(dimensionize(p[0], p[1] - fl, p[2]));

}

for (var i = 0; i < dPts.length; i += 2) {

ctx.beginPath();

ctx.moveTo(dPts[i].x, dPts[i].y)

ctx.lineTo(dPts[i + 1].x, dPts[i + 1].y);

ctx.stroke();

}

for (var i = 0; i < 2; ++i) {

ctx.beginPath();

ctx.moveTo(dPts[i].x, dPts[i].y);

for (var j = 2; j < dPts.length; j += 2) {

ctx.lineTo(dPts[i + j].x, dPts[i + j].y);

}

ctx.closePath();

ctx.stroke();

}

}

anim();

window.addEventListener('mousemove', function(e) {

ry = e.clientX / w * Math.PI * 4;

rx = e.clientY / h * Math.PI * 4;

})