Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

HTML5キャンバス変換マトリックス

HTML5キャンバスは、変換行列を直接変更できるメソッドを提供します。変換行列は、最初はID変換である必要があります。その後、変換方法を使用して調整できます。

トランスフォーム（m11、m12、m21、m22、dx、dy） メソッドは、現在の変換行列に-

で記述される行列を乗算する必要があります 
m11 m21 dx
m12 m22 dy
 0   0  1
setTransform（m11、m12、m21、m22、dx、dy） メソッドは、現在の変換を単位行列にリセットしてから、同じ引数を使用してtransform（m11、m12、m21、m22、dx、dy）メソッドを呼び出す必要があります。

<!DOCTYPE HTML>
<html>
   <head>
      <script>
         function drawShape(){

            // get the canvas element using the DOM
            var canvas = document.getElementById('mycanvas');

            // Make sure we don't execute when canvas isn't supported
            if (canvas.getContext){

               // use getContext to use the canvas for drawing
               var ctx = canvas.getContext('2d');
               var sin = Math.sin(Math.PI/6);
               var cos = Math.cos(Math.PI/6);
               ctx.translate(200, 200);
               var c = 0;

               for (var i=0; i <= 12; i++) {
                  c = Math.floor(255 / 12 * i);
                  ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
                  ctx.fillRect(0, 0, 100, 100);
                  ctx.transform(cos, sin, -sin, cos, 0, 0);
               }
               ctx.setTransform(-1, 0, 0, 1, 200, 200);
               ctx.fillStyle = "rgba(100, 100, 255, 0.5)";
               ctx.fillRect(50, 50, 100, 100);
            } else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>
   <body onload="drawShape();">
      <canvas id = "mycanvas" width = "400" height = "400"></canvas>
   </body>
</html>

  1. HTML5キャンバス変換

    HTML5キャンバスは、変換行列を直接変更できるメソッドを提供します。変換行列は、最初はID変換である必要があります。その後、変換方法を使用して調整できます。 例 キャンバス変換の例を見てみましょう： <!DOCTYPE HTML> <html>    <head>       <script>          function drawShape(){             //

  2. HTML5でキャンバスを中央に配置する方法は？

    HTML 5でキャンバスを中央に配置するには、divタグにcanvasタグを含めます。次に、divタグを中央揃えにします。そうすることで、キャンバスも中央揃えになります。 例 <!DOCTYPE html>. <html>    <body>       <div style = "text-align:center;">          <canvas style = "background-color:GR