Merge pull request #1 from iPolyomino/triangle-background

canvas background
syasin-5d · Dec 7, 2018 · 1bb972c · 1bb972c
2 parents 228a18b + 8cd9bde
commit 1bb972c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -9,6 +9,7 @@
 </head>
 
 <body onload="draw();">
+    <canvas id="canvas"></canvas>
     <div id="wrap">
         <header>
             <h1>NeonDrop っぽいサイト、作ってみたっす！</h1>
@@ -19,8 +20,6 @@ <h1>NeonDrop っぽいサイト、作ってみたっす！</h1>
                 下のはcanvasで三角形をたくさん生成してみたやつっす <br/>
                 リロードするたびに三角形の色とか、変わるっすよ！
             </p>
-            <canvas id="canvas" width="540" height="400">
-            </canvas>
         </div>
 
     </div>

diff --git a/neondrop.css b/neondrop.css
@@ -1,13 +1,9 @@
 @charset "UTF-8";
-body {
-    background-image: url('neondrop.png');
-    background-attachment: fixed;
-    background-size: 100% 100%;
-}
 
-#wrap {
+div#wrap {
     width: 780px;
     margin: 0 auto;
+    position: relative;
 }
 
 header {
@@ -18,9 +14,13 @@ header {
     text-align: center;
 }
 
-canvas {
+canvas#canvas {
     background-color: white;
-    border: 1px solid black;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
 }
 
 div#main {

diff --git a/neondrop.js b/neondrop.js
@@ -10,6 +10,9 @@ const pink = "#CC00FF";
 function draw(){
     var canvas = document.getElementById("canvas");
     if(canvas.getContext){
+        canvas.width  = window.innerWidth;
+        canvas.height = window.innerHeight;
+
         var ctx = canvas.getContext("2d");
 
         var colors = [yellow, blue, cyan, pink];
@@ -24,6 +27,10 @@ function draw(){
             drawTriangle({ctx:ctx, x:x, y:y, rotate:rotate, color:color});
         }
 
+        window.onresize = () => {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            draw();
+        };
     }
 }