如何相对于在mousedrag上旋转的画布旋转div

Question

我有一个canvas tube1Ctx和一个id为sineWave的div，使用纯javascript在鼠标拖动时旋转画布，现在我需要相对于画布同时旋转div（相同的角度位移）。当我尝试使用下面的代码时，拖动旋转画布时，转换样式不会更新。有人可以帮我解决。提前致谢

function tubeRotate(e){

if (moveFlag2){

tube1XPos = e.clientX - tube1Canvas.offsetLeft;
tube1YPos = e.clientY - tube1Canvas.offsetTop;  


rotate = tube1XPos-((e.clientX-tube1Canvas.offsetLeft));    
rotate = (Math.atan(240/rotate))* Math.PI / 180;
tube1Ctx.clearRect(240,10,tube1Canvas.width,tube1Canvas.height);    
tube1Ctx.translate(275, 10);
tube1Ctx.rotate(rotate);    
tube1Ctx.translate(-275,-10 );  
tube1Ctx.drawImage(tube1Img,240 , 10 , 46 , 235 );


    var angle=rotate;

document.getElementById("sineWave").style.MozTransformOrigin='0% 0%';
document.getElementById("sineWave").style.MozTransform =  'rotate('+angle+'rad)';

document.getElementById("sineWave").style.webkitTransformOrigin='0% 0%';
document.getElementById("sineWave").style.webkitTransform = 'rotate('+angle+'rad)';

}

Answer 1

缺少报价

document.getElementById（“sineWave”.style.MozTransformOrigin ='0％0％';