h5球的立体效果_使用HTML5 Canvas 2D直角坐标系实现三维球体效果

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

function g(e) {

return document.getElementById(e);

}

/* 一个插值算法 */

function Cubic(t, b, c, d) {

return c * (t /= d) * t * t + b;

}

var ctx = g('pad').getContext('2d');

ctx.scale(100, 100);

ctx.translate(3, 3);

var theta = 4.2; //转角

var eleva = 0.6; //仰角

/* 投影算法 */

function iso(x, y, z) {

var dist = Math.sqrt(x * x + y * y);

var angle = (x == 0 && y == 0) ? 0 : Math.atan(y / x) + theta + ((x < 0) ? Math.PI : 0);

x = Math.cos(angle) * dist;

y = -Math.sin(angle) * dist;

var fact = (y * Math.cos(eleva) + z * Math.sin(eleva) + 8) / 8;

y = y * Math.sin(eleva) - z * Math.cos(