Playing with the MDN breakout tutorial

8 years ago · 8b0863984f
parent f0bbf3fa8e
commit 8b0863984f
1 changed files with 36 additions and 0 deletions
--- a/mdn-breakout/index.html
+++ b/mdn-breakout/index.html
@ -0,0 +1,36 @@
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8" />
    <title>MDN Breakout</title>
    <style>
 * { padding: 0; margin: 0; }
 canvas { background: #eee; display: block; margin: 0 auto; }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="480" height="320"></canvas>
    <script>
 var canvas = document.getElementById("myCanvas");
 var ctx = canvas.getContext("2d");
 ctx.beginPath();
 ctx.rect(20, 40, 50, 50);
 ctx.fillStyle = "#FF0000";
 ctx.fill();
 ctx.closePath();
 ctx.beginPath();
 ctx.arc(240, 160, 20, 0, Math.PI*2, false);
 ctx.fillStyle = "green";
 ctx.fill();
 ctx.closePath();
 ctx.beginPath();
 ctx.rect(160, 10, 100, 40);
 ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
 ctx.stroke();
 ctx.closePath();
    </script>
  </body>
 </html>