JavaScriptお絵描き JavaScriptによって線画された、様々な図形を表示します。図形は、5種類以上画面に表示させてください。また、必ず線を6本以上使用した、複雑な図形を表示してください。線の色は赤色です。『他も見る！』ボタンをタップすると、別のランダムな図形が線画されます。's game

Click here for free DL of the app version that can save data.

No:3515

5338

←

Prev Next

→

JavaScriptお絵描き JavaScriptによって線画された、様々な図形を表示します。 ..ALL
Developer anonymous｜Date and time 23/8/14 16:22:41
Build time unknown sec｜Game capacity 2.109KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JavaScriptお絵描き</title>
  </head>
  <body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <button onclick="drawNewShape()">他も見る！</button>
    <script>
      const canvas = document.getElementById('myCanvas');
      const ctx = canvas.getContext('2d');

function drawTriangle() {
        ctx.beginPath();
        ctx.moveTo(100, 100);
        ctx.lineTo(200, 100);
        ctx.lineTo(150, 200);
        ctx.closePath();
        ctx.strokeStyle = 'red';
        ctx.stroke();
      }

function drawSquare() {
        ctx.beginPath();
        ctx.moveTo(100, 100);
        ctx.lineTo(200, 100);
        ctx.lineTo(200, 200);
        ctx.lineTo(100, 200);
        ctx.closePath();
        ctx.strokeStyle = 'red';
        ctx.stroke();
      }

function drawPentagon() {
        ctx.beginPath();
        ctx.moveTo(150, 50);
        ctx.lineTo(250, 100);
        ctx.lineTo(225, 200);
        ctx.lineTo(125, 200);
        ctx.lineTo(100, 100);
        ctx.closePath();
        ctx.strokeStyle = 'red';
        ctx.stroke();
      }

function drawHexagon() {
        ctx.beginPath();
        ctx.moveTo(100, 150);
        ctx.lineTo(120, 125);
        ctx.lineTo(180, 125);
        ctx.lineTo(200, 150);
        ctx.lineTo(180, 175);
        ctx.lineTo(120, 175);
        ctx.closePath();
        ctx.strokeStyle = 'red';
        ctx.stroke();
      }

function drawOctagon() {
        ctx.beginPath();
        ctx.moveTo(150, 50);
        ctx.lineTo(250, 50);
        ctx.lineTo(300, 150);
        ctx.lineTo(250, 250);
        ctx.lineTo(150, 250);
        ctx.lineTo(100, 150);
        ctx.closePath();
        ctx.strokeStyle = 'red';
        ctx.stroke();
      }

function drawNewShape() {
        const shapes = [drawTriangle, drawSquare, drawPentagon, drawHexagon, drawOctagon];
        const randomIndex = Math.floor(Math.random() * shapes.length);
        shapes[randomIndex]();
      }

// 初期表示
      drawHexagon();
    </script>
  </body>
</html>