В настоящее время я пытаюсь понять, как делать преобразования матриц при рисовании объектов в html5, но различные объяснения, обнаруженные в нескольких разных источниках информации, вызвали некоторую путаницу. Я нашел информацию о том, что для анимации рисованных объектов в html5, как видно, here, хотя я также видел, что преобразования могут быть применены к отдельным объектам на странице путем преобразования рисованной точки, но я не совсем уверен, как это работает.Функциональность преобразования матрицы html5
Я нашел образец кода, который реализует анимацию ног (две строки), но делает анимацию без применения преобразований к холсту, используя объект функции для матрицы преобразования, определенной в каком-либо другом файле. Код обеспечивает собственную реализацию moveTo() и lineTo() (которые обычно используются с объектом canvas), в которых он преобразует точку, переданную в нее, перенастраивает ее положение на основе окна просмотра, а затем вызывает версию перемещения холста к передаче в преобразованной точки.
Итак, здесь есть несколько путаниц: 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'. –