読者です 読者をやめる 読者になる 読者になる

azukipochette's weblog

memory dump (mini)

Canvas の練習 : 1

<html>
<head>
   <title>Sample</title>
   <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
   <script>
       function init(){
           
           var canvas = document.getElementById("canvas");
           var ctx = canvas.getContext("2d");
           ctx.strokeStyle = "#ff0000";
           ctx.lineWidth = 4;
           ctx.beginPath();
           ctx.moveTo(20, 20);
           ctx.lineTo(200, 100);
           ctx.lineTo(200, 200);
           ctx.closePath();
           ctx.stroke();

           ctx.fillStyle = "#0000ff";
           ctx.beginPath();
           ctx.moveTo(220, 20);
           ctx.lineTo(400, 100);
           ctx.lineTo(400, 200);
           ctx.closePath();
           ctx.fill();

           var canvas2 = document.getElementById("canvas2");
           var ctx = canvas2.getContext("2d");
           ctx.fillStyle= "#00ff00";
           ctx.fillRect(10, 10, 180, 200);
           ctx.fill();

           ctx.strokeStyle = "#0000ff";
           ctx.strokeRect(220, 10, 180, 200);
           ctx.stroke();

           var canvas3 = document.getElementById("canvas3");
           var ctx = canvas3.getContext("2d");

           ctx.fillStyle = "#00ff00";
           ctx.beginPath();
           ctx.arc(100, 100, 80, 0, Math.PI * 3/2);
           ctx.fill();

           ctx.strokeStyle = "#0000ff";
           ctx.beginPath();
           ctx.arc(300, 100, 80, 0, Math.PI * 3/2);
           ctx.stroke();
       }
   </script>
</head>
<body onload="init()">
    <div>
        <canvas id="canvas" width="500" height="250"/> 
    </div>
    <div>
        <canvas id="canvas2" width="500" height="250"/>
    </div>
    <div>
        <canvas id="canvas3" width="500" height="250"/>
    </div>
</body>
</html>