画布绘制 - 在不清除旧状态的情况下更改旋转轴

canvas draw - change rotation axis without clearing old state

本文关键字：状态 情况下 旋转 清除 布绘制 绘制      更新时间：2023-09-26

我正在使用html5画布来创建一个简单的3d多边形程序。 该程序允许更改每个轴的旋转 - x，y，z。 在改变 x/y/z 角度的事件中，完成对绘图函数的相应调用。 问题是每次我对 draw 函数进行新调用时，它都会清除旧位置，结果是它跳跃。 基本上每个函数都独立工作，但它们不能一起工作。

示例代码： 

var Perspective = function(rotate){
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//clear
...
switch(rotate){
case "x" : {
var transform = Mat3.rotationX(Math.radians(rotateX.getValue())); //rotation x
break;
}
case "y" : {
var transform = Mat3.rotationY(Math.radians(rotateY.getValue())); //rotation y
break;
}
case "z" : {
var transform = Mat3.rotationZ(Math.radians(rotateZ.getValue())); //rotation Z
}
...
draw(...settings..)
}

为每个滑块更改事件设置侦听器（也适用于 Y 和 Z）。AngleX 调用 Perspective，将字符串"x"作为旋转参数传递。

var angleX = $('#AngleX').slider()
            .on('slide change', AngleX)
            .data('slider');

如果不同的轴更动态，我如何进行更改？

无论如何，

我已经解决了它，谢谢你 QBM5 .. 开关情况是一个错误，我不得不像这样乘以所有轴变换矩阵：

 var transform = Mat3.rotationX(-Math.radians(rotateY.getValue())) .multiply(Mat3.rotationY(Math.radians(rotateX.getValue())));
相关文章：