mousedragで回転するキャンバスに関してdivを回転させる方法

Question

私はcanvas tube1Ctxとidを持つdiv sineWaveを持っています。キャンバスは純粋なjavascriptを使用してマウスドラッグで回転します。キャンバスと同じ時間（同じ角変位）。下のコードを試してみると、ドラッグスタイルがキャンバスを回転させている間に変換スタイルが更新されません。誰でも私が解決するのを助けてくれますか？事前に感謝

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（ "正弦波）.style.MozTransformOrigin = '0％0％';