html5 矩阵转换,功能HTML5矩阵变换

我正在试图让如何绘制在HTML5对象时，但在信息的多个不同来源找到了不同的解释已经引起了一些混乱做矩阵变换的理解。我发现信息说，为了在html5中创建绘制对象的动画，如here所示，同时我也看到可以通过转换绘制的点将变换应用于页面上的单个对象，但我不确定它是如何实现的作品。功能HTML5矩阵变换

我发现，实现腿的动画(两行)代码示例，但它确实动画不施加转换到帆布，使用用于在某些其他文件中定义的变换矩阵的功能对象。该代码提供了自己的实现moveTo()和lineTo()(通常与画布对象一起使用)，在该实现中，它转换传入的点，根据视口重新调整其位置，然后调用画布的移动版本以传递转化点。

所以这里有几点困惑： 1.当setTransform()只能在画布上使用时，在变换矩阵对象上实现新的变换函数的目的是什么？ 2.方法如rotate()和translate()在矩阵对象上被调用而没有传入点，所以这些操作如何实际应用？ 3.什么时候应该将转换应用于整个画布(如所提供的链接所做的那样)，而不是绘制特定的对象，因为它们似乎都可以工作？

我一般只是寻找相关的一般概述，我相当困惑是如何工作的。从该示例中的代码是下面供参考：

var w, h, g;

function viewport(p) {

return [ w/2 * p[0] + w/2, h/2 - p[1] * w/2 ];

}

function moveTo(p) {

var q = m.transform(p); // APPLY 3D MATRIX TRANFORMATION

var xy = viewport(q); // APPLY VIEWPORT TRANSFORM

g.moveTo(xy[0], xy[1]);

}

function lineTo(p) {

var q = m.transform(p); // APPLY 3D MATRIX TRANFORMATION

var xy = viewport(q); // APPLY VIEWPORT TRANSFORM

g.lineTo(xy[0], xy[1]);

}

myCanvas1.animate = function(_g) {

g = _g;

w = g.canvas.width;

h = g.canvas.height;

g.fillStyle = 'rgb(200,140,255)';

g.beginPath();

g.moveTo(0, 0);

g.lineTo(w, 0);

g.lineTo(w, h);

g.lineTo(0, h);

g.lineTo(0, 0);

g.stroke();

g.fillStyle = 'rgb(128,0,0)';

g.strokeStyle = 'rgb(0,0,0)';

var legBend = .4;

var t = 3 * time;

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

var angle = -Math.PI/2 * (1 + Math.sin(time));

console.log(angle);

var sign = (leg == 0) == (angle < -Math.PI/2) ? -1 : 1;

m.identity();

m.rotateY(-Math.PI/2 * (1 + Math.sin(time)));

g.beginPath();

m.translate(0, .5, .1 * sign);

moveTo([0,0,0]); // HIP

m.rotateZ(-.5 * legBend + sign * legBend * Math.cos(t));

m.translate(0, -.5, 0);

lineTo([0,0,0]); // HIP

m.rotateZ(2 * legBend + 2 * legBend * sign * Math.sin(t));

m.translate(0, -.5, 0);

lineTo([0,0,0]); // KNEE

m.translate(-.1, 0, 0);

lineTo([0,0,0]); // KNEE

g.strokeStyle = 'rgb(0,0,0)';

g.lineWidth = 30;

g.stroke();

g.strokeStyle = 'rgb(255,0,0)';

g.lineWidth = 20;

g.stroke();

}

}

+2

它让我在身体上感到痛苦，因为看不到'src = g.js'的引号。 –