IT 통신 수학 과학/HTML

웹에 그림그리기.

paddre 2020. 10. 1. 09:47

본 내용은   joshondesign.com/ 에서 게시된 내용을 정리한 내용입니다.    

 

코드

<html>

<body>

  <canvas width="800" height="600" id="canvas"></canvas>

  <script>

    var canvas = document.getElementById('canvas');

    var c = canvas.getContext('2d');

    c.fillStyle = "red";

    c.fillRect(100,100,400,300);

  </script>

</body>

</html>

SCREENSHOT Simple red rectangle

feliz-dia.000webhostapp.com/simple%20rectangle.html

 

 

코드

<html>

<body>

  <canvas width="800" height="600" id="canvas"></canvas>

  <script>   

    var canvas = document.getElementById('canvas');

    var c = canvas.getContext('2d');

    c.fillStyle = '#ccddff';

    c.beginPath();

    c.moveTo(50,20);

    c.lineTo(200,50);

    c.lineTo(150,80);

    c.closePath();

    c.fill();

    c.strokeStyle = 'rgb(0,128,0)';

    c.lineWidth = 5; c.stroke();

  </script>

</body>

</html>

    

feliz-dia.000webhostapp.com/simple%20triangle.html

 

simple path :

<html>

<body>

  <canvas width="800" height="600" id="canvas"></canvas>

  <script>   

    var canvas = document.getElementById('canvas');

    var c = canvas.getContext('2d');

    
    c.fillStyle = 'red';
    c.beginPath();
    c.moveTo(10,30);
    c.bezierCurveTo(50,90,159,-30,200,30);
    c.lineTo(200,90);
    c.lineTo(10,90);
    c.closePath();
    c.fill();
    c.lineWidth = 4;
    c.strokeStyle = 'black';
    c.stroke();    
  </script>

</body>

</html>

feliz-dia.000webhostapp.com/simple%20path.html