Snippets

Takumi IINO draw rest. add-subtract, translate-scale

Updated by Takumi IINO
View revision

File index.html Modified

  • Ignore whitespace
  • Hide word diff 
         });
       };
 
-
       var draw2 = function(canvas) {
         var ctx = canvas.getContext('2d');
         var canvasWidth = canvas.getAttribute('width');
Created by Takumi IINO
View revision

File index.html Added

  • Ignore whitespace
  • Hide word diff 
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Draw Rect</title>
+  </head>
+  <body>
+    <canvas id="canvas1" width="100" height="100"></canvas>
+    <canvas id="canvas2" width="100" height="100"></canvas>
+    <canvas id="canvas3" width="100" height="100"></canvas>
+    <canvas id="canvas4" width="100" height="100"></canvas>
+    <script>
+      var onload = function() {
+        draw1(document.getElementById('canvas1'));
+        draw2(document.getElementById('canvas2'));
+        draw3(document.getElementById('canvas3'));
+        draw4(document.getElementById('canvas4'));
+      };
+
+      var draw1 = function(canvas) {
+        var ctx = canvas.getContext('2d');
+        var canvasWidth = canvas.getAttribute('width');
+        var canvasHeight = canvas.getAttribute('height');
+
+        var rectWidth = 20;
+        var rectHeight = 20;
+
+        var offsetX = 10;
+        var offsetY = 10;
+
+        ctx.beginPath();
+        ctx.strokeRect(0, 0, canvasWidth, canvasHeight);
+
+        [
+          [offsetX,                           offsetY],
+          [offsetX,                           canvasHeight - offsetY - rectHeight],
+          [canvasWidth - offsetX - rectWidth, offsetY],
+          [canvasWidth - offsetX - rectWidth, canvasHeight - offsetY - rectHeight]
+        ].forEach(function(a) {
+          var x = a[0];
+          var y = a[1];
+          ctx.beginPath();
+          ctx.strokeRect(x, y, rectWidth, rectHeight);
+        });
+      };
+
+
+      var draw2 = function(canvas) {
+        var ctx = canvas.getContext('2d');
+        var canvasWidth = canvas.getAttribute('width');
+        var canvasHeight = canvas.getAttribute('height');
+
+        var rectWidth = 20;
+        var rectHeight = 20;
+
+        var offsetX = 10;
+        var offsetY = 10;
+
+        ctx.beginPath();
+        ctx.strokeRect(0, 0, canvasWidth, canvasHeight);
+
+        [
+          [0,           0,             1,  1], // 左上
+          [canvasWidth, 0,            -1,  1], // 右上
+          [0,           canvasHeight,  1, -1], // 左下
+          [canvasWidth, canvasHeight, -1, -1]  // 右下
+        ].forEach(function(a) {
+          var translateX = a[0];
+          var translateY = a[1];
+          var scaleX = a[2];
+          var scaleY = a[3];
+          ctx.save();
+          ctx.translate(translateX, translateY);
+          ctx.scale(scaleX, scaleY);
+          ctx.strokeRect(offsetX, offsetY, rectWidth, rectHeight);
+          ctx.restore();
+        });
+      };
+
+      var draw3 = function(canvas) {
+        var ctx = canvas.getContext('2d');
+        var canvasWidth = canvas.getAttribute('width');
+        var canvasHeight = canvas.getAttribute('height');
+
+        var rectWidth = 20;
+        var rectHeight = 20;
+
+        var offsetX = 10;
+        var offsetY = 10;
+
+        ctx.beginPath();
+        ctx.strokeRect(0, 0, canvasWidth, canvasHeight);
+
+        [
+          [0,           0,             1,  1], // 左上
+          [canvasWidth, 0,            -1,  1], // 右上
+          [0,           canvasHeight,  1, -1], // 左下
+          [canvasWidth, canvasHeight, -1, -1]  // 右下
+        ].forEach(function(a) {
+          var translateX = a[0];
+          var translateY = a[1];
+          var scaleX = a[2];
+          var scaleY = a[3];
+          ctx.save();
+          ctx.translate(translateX, translateY);
+          ctx.scale(scaleX, scaleY);
+          myRect1(ctx, offsetX, offsetY, rectWidth, rectHeight);
+          ctx.restore();
+        });
+      };
+
+      var draw4 = function(canvas) {
+        var ctx = canvas.getContext('2d');
+        var canvasWidth = canvas.getAttribute('width');
+        var canvasHeight = canvas.getAttribute('height');
+
+        var rectWidth = 20;
+        var rectHeight = 20;
+
+        var offsetX = 10;
+        var offsetY = 10;
+
+        ctx.beginPath();
+        ctx.strokeRect(0, 0, canvasWidth, canvasHeight);
+
+        [
+          [0,           0,             1,  1], // 左上
+          [canvasWidth, 0,            -1,  1], // 右上
+          [0,           canvasHeight,  1, -1], // 左下
+          [canvasWidth, canvasHeight, -1, -1]  // 右下
+        ].forEach(function(a) {
+          var translateX = a[0];
+          var translateY = a[1];
+          var scaleX = a[2];
+          var scaleY = a[3];
+          ctx.save();
+          ctx.translate(translateX, translateY);
+          ctx.scale(scaleX, scaleY);
+          myRect2(ctx, offsetX, offsetY, rectWidth, rectHeight);
+          ctx.restore();
+        });
+      };
+
+
+      function myRect1(ctx, x, y, width, height) {
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+        ctx.lineTo(x + width, y);
+        ctx.lineTo(x + width, y + height);
+        ctx.lineTo(x, y + height);
+        ctx.lineTo(x, y);
+        ctx.stroke();
+      }
+
+      function myRect2(ctx, x, y, width, height) {
+        ctx.save();
+        ctx.translate(x, y);
+        ctx.beginPath();
+        ctx.moveTo(0, 0);
+        ctx.lineTo(width, 0);
+        ctx.lineTo(width, height);
+        ctx.lineTo(0, height);
+        ctx.lineTo(0, 0);
+        ctx.stroke();
+        ctx.restore();
+      }
+
+      window.addEventListener('load', onload, false);
+    </script>
+  </body>
+</html>
HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.