Computer >> Máy Tính >  >> Lập trình >> Javascript

Tăng hoặc giảm các đơn vị trong lưới HTML5 Canvas


HTML5 canvas cung cấp phương thức scale (x, y) được sử dụng để tăng hoặc giảm các đơn vị trong lưới canvas của chúng tôi. Điều này có thể được sử dụng để vẽ các hình dạng và bitmap được thu nhỏ hoặc phóng to.

Phương pháp này nhận hai tham số trong đó x là hệ số tỷ lệ theo hướng ngang và y là hệ số tỷ lệ theo hướng dọc. Cả hai tham số phải là số dương.

Ví dụ

Hãy để chúng tôi xem một ví dụ -

<!DOCTYPE HTML>
<html>
   <head>
      <script>
         function drawShape(){
            // get the canvas element using the DOM
            var canvas = document.getElementById('mycanvas');

            if (canvas.getContext){
               // use getContext to use the canvas for drawing
               var ctx = canvas.getContext('2d');
               ctx.strokeStyle = "#fc0";
               ctx.lineWidth = 1.5;
               ctx.fillRect(0,0,300,300);

               // Uniform scaling
               ctx.save()
               ctx.translate(50,50);
               drawSpirograph(ctx,22,6,5);
 
               ctx.translate(100,0);
               ctx.scale(0.75,0.75);
               drawSpirograph(ctx,22,6,5);

               ctx.translate(133.333,0);
               ctx.scale(0.75,0.75);
               drawSpirograph(ctx,22,6,5);

               ctx.restore();
               ctx.strokeStyle = "#0cf";
               ctx.save()
               ctx.translate(50,150);
               ctx.scale(1,0.75);
               drawSpirograph(ctx,22,6,5);

               ctx.translate(100,0);
               ctx.scale(1,0.75);
               drawSpirograph(ctx,22,6,5);

               ctx.translate(100,0);
               ctx.scale(1,0.75);
               drawSpirograph(ctx,22,6,5);

               ctx.restore();
               ctx.strokeStyle = "#cf0";
               ctx.save()
               ctx.translate(50,250);
               ctx.scale(0.75,1);
               drawSpirograph(ctx,22,6,5);

               ctx.translate(133.333,0);
               ctx.scale(0.75,1);
               drawSpirograph(ctx,22,6,5);

               ctx.translate(177.777,0);
               ctx.scale(0.75,1);
               drawSpirograph(ctx,22,6,5);
               ctx.restore();
            } else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
         function drawSpirograph(ctx,R,r,O){
            var x1 = R-O;
            var y1 = 0;
            var i = 1;
            ctx.beginPath();
            ctx.moveTo(x1,y1);
            do {
               if (i>20000) break;
               var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
               var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
               ctx.lineTo(x2,y2);
               x1 = x2;
               y1 = y2;
               i++;
            }
            while (x2 != R-O && y2 != 0 );
            ctx.stroke();
         }
      </script>
   </head>

   <body onload = "drawShape();">
      <canvas id = "mycanvas" width = "400" height = "400"></canvas>
   </body>
</html>