【发布时间】：2016-01-19 20:11:53
【问题描述】：
我目前正在尝试了解如何在 html5 中绘制对象时进行矩阵转换，但在多个不同信息源中发现的不同解释导致了一些混乱。我发现信息说，为了在 html5 中为绘制的对象设置动画，如 here 所示，而我还看到可以通过转换绘制点将转换应用于页面上的单个对象，但我不太确定这个怎么运作。
我找到了一个代码示例，它实现了腿部动画（两行），但它在没有对画布应用变换的情况下使用其他文件中定义的变换矩阵的函数对象来制作动画。该代码提供了自己的moveTo() 和lineTo() 实现（通常与画布对象一起使用），其中它转换传入的点，根据视口重新调整其位置，然后调用画布的移动版本传递转换点。
所以这里有几点混淆：
1. setTransform() 只能在画布上使用时，在变换矩阵对象上实现一个新的变换函数的目的是什么？
2. 在矩阵对象上调用rotate() 和translate() 之类的方法，而没有传入点，那么这些操作是如何实际应用的？
3. 何时应将转换应用于整个画布（如提供的链接中所做的那样），而不是应用于绘制的特定对象，因为两者似乎都可以工作？
我通常只是在寻找对此的一般概述，因为我对它的工作原理感到相当困惑。示例代码如下供参考：
<head>
<script src=g.js></script>
<script src=matrix4x4.js></script>
</head>
<body onload=g_start()>
<canvas id=myCanvas1 width=480 height=480></canvas>
<script>
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();
}
}
</script>
</body>
【问题讨论】：
-
看不到
src=g.js周围的引号让我感到很痛苦。
标签： javascript html canvas matrix