別の図面に影響を与えずに、HTML 5で図面を翻訳して回転するにはどうすればいいですか？

-2

最初の図面を翻訳して2番目の図面を固定しておくと、2番目の図面が固定されているので、2番目の図面を指定した位置に固定し、最初の変換機能の値を変更すると、別の図面に影響を与えずに、HTML 5で図面を翻訳して回転するにはどうすればいいですか？

マイコード： -

<html> 
 
    <body> 
 
    <canvas id="myCanvas" width="300" height="150" style="border:1px solid 
 
     #d3d3d3;"> 
 
    Your browser does not support the HTML5 canvas tag. 
 
    </canvas> 
 
    <script> 
 
    var c = document.getElementById("myCanvas"); 
 
    var ctx = c.getContext("2d"); 
 
    
 
    ctx.translate(10,10); 
 
    ctx.fillRect(70,40,44,30); 
 
    ctx.fillRect(10,10,40,30); 
 
    </script> 
 
</body> 
 
</html>

出典

2017-08-08 NIrik Shan

<html> 
 
    <body> 
 
    <canvas id="myCanvas" width="300" height="150" style="border:1px solid 
 
     #d3d3d3;"> 
 
    Your browser does not support the HTML5 canvas tag. 
 
    </canvas> 
 
    <script> 
 
    var c = document.getElementById("myCanvas"); 
 
    var ctx = c.getContext("2d"); 
 
    ctx.save(); 
 
    ctx.translate(10,10); 
 
    ctx.fillRect(70,40,44,30); 
 
    ctx.restore(); 
 
    ctx.fillRect(10,10,40,30); 
 
    </script> 
 
</body> 
 
</html>

save()とrestore()を使用できます。完了後に翻訳をキャンバスの状態に保存する前に、復元してください。

出典

2017-08-08 08:01:23 Durga

<html> 
 
    <body> 
 
    <canvas id="myCanvas" width="300" height="150" style="border:1px solid 
 
     #d3d3d3;"> 
 
    Your browser does not support the HTML5 canvas tag. 
 
    </canvas> 
 
    <script> 
 
    var c = document.getElementById("myCanvas"); 
 
    var ctx = c.getContext("2d"); 
 
    
 
    ctx.translate(10,10); 
 
    ctx.fillRect(70,40,44,30); 
 
    ctx.rotate(20*Math.PI/180); 
 
    ctx.fillRect(10,10,40,30); 
 
    </script> 
 
</body> 
 
</html>

出典

2017-08-08 07:56:54 Sergej

別の図面に影響を与えずに、HTML 5で図面を翻訳して回転するにはどうすればいいですか？

答えて

関連する問題