HTML => 캔버스

매개 변수

속성	기술
신장	캔버스 높이를 지정합니다.
폭	캔버스 너비를 지정합니다.

비고

이 태그는 Internet Explorer 9 이하 버전과 호환되지 않습니다. 브라우저 호환성을 위해 caniuse.com 을 확인하십시오.
canvas 는 그래픽의 컨테이너 일 뿐이며 실제 그래픽 그리기는 JavaScript로 수행됩니다.

기본 예제

canvas 요소는 그래픽을 그리기 위해 HTML5에 도입되었습니다.

<canvas id="myCanvas">
   Cannot display graphic. Canvas is not supported by your browser (IE<9)
</canvas>

위의 예제는 크기가 300x150 픽셀 인 투명한 HTML <canvas> 요소를 만듭니다.

캔버스 요소를 사용하여 모양, 그래프, 이미지 조작, 자바 스크립트 등 재미있는 게임을 만들 수 있습니다.
canvas 의 2D 드로어 블 레이어 표면 오브젝트를 CanvasRenderingContext2D 라고합니다. 또는에서 HTMLCanvasElement 은 Using .getContext("2d") 방법 :

var ctx = document.getElementById("myCanvas").getContext("2d");
// now we can refer to the canvas's 2D layer context using `ctx`

ctx.fillStyle = "#f00";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); // x, y, width, height

ctx.fillStyle = "#000";
ctx.fillText("My red canvas with some black text", 24, 32); // text, x, y

jsFiddle 예제

에 두 개의 직사각형 그리기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Draw two rectangles on the canvas</title>
    <style>
      canvas{
          border:1px solid gray;
      }
    </style>
    <script async>
      window.onload = init; // call init() once the window is completely loaded
      function init(){
        // #1 - get reference to <canvas> element
        var canvas = document.querySelector('canvas');
        
        // #2 - get reference to the drawing context and drawing API
        var ctx = canvas.getContext('2d');

        // #3 - all fill operations are now in red
        ctx.fillStyle = 'red'; 

        // #4 - fill a 100x100 rectangle at x=0,y=0
        ctx.fillRect(0,0,100,100);
        
        // #5 - all fill operations are now in green
        ctx.fillStyle = 'green'; 
        
        // #6 - fill a 50x50 rectangle at x=25,y=25
        ctx.fillRect(25,25,50,50);
        
      }
      </script>
</head>
<body>
  <canvas width=300 height=200>Your browser does not support canvas.</canvas>
</body>
</html>

이 예제는 다음과 같습니다.

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

HTML
캔버스

수색…

매개 변수

비고

기본 예제

에 두 개의 직사각형 그리기