[R]HTML5 Canvas

Your browser does not support the <canvas> element.

The HTML <canvas> element is used to draw graphics on a web page.

HTML <canvas>요소는 웹 페이지에 그래픽을 그리는 데 사용됩니다.

The graphic to the left is created with <canvas>. It shows four elements: a red rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor text.

왼쪽의 그래픽은으로 생성됩니다 <canvas>. 빨간색 사각형, 그라디언트 사각형, 여러 색 사각형 및 여러 색 텍스트의 네 가지 요소가 표시됩니다.

---

What is HTML Canvas?

HTML Canvas 란 무엇입니까?

The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.

HTML <canvas>요소는 자바 스크립트를 통해 즉석에서 그래픽을 그리는 데 사용됩니다.

The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics.

<canvas>요소는 그래픽 만 컨테이너입니다. 실제로 그래픽을 그리려면 JavaScript를 사용해야합니다.

Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Canvas에는 경로, 상자, 원, 텍스트 및 이미지 추가를위한 여러 가지 방법이 있습니다.

---

Browser Support

브라우저 지원

The numbers in the table specify the first browser version that fully supports the <canvas> element.

표의 숫자는 <canvas>요소 를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다 .

Element
<canvas>	4.0	9.0	2.0	3.1	9.0

---

Canvas Examples

캔버스 예제

A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.

캔버스는 HTML 페이지의 사각형 영역입니다. 기본적으로 캔버스에는 테두리가없고 내용이 없습니다.

The markup looks like this:

마크 업은 다음과 같습니다.

<canvas id="myCanvas" width="200" height="100"></canvas>

Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas. To add a border, use the style attribute.

참고 : 항상 캔버스의 크기를 정의하려면 특성 ( id스크립트에서 참조 할 속성 ) 및 a width및 height속성을 지정하십시오. 테두리를 추가하려면 style속성을 사용하십시오 .

Here is an example of a basic, empty canvas:

다음은 빈 빈 캔버스의 예입니다.

브라우저가 canvas 요소를 지원하지 않습니다.

Example

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

---

Draw a Line

브라우저가 캔버스 요소를 지원하지 않습니다.

Example

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

---

Draw a Circle

브라우저가 캔버스 요소를 지원하지 않습니다.

Example

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

---

Draw a Text

브라우저가 캔버스 요소를 지원하지 않습니다.

Example

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

---

Stroke Text

브라우저가 캔버스 요소를 지원하지 않습니다.

Example

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

---

Draw Linear Gradient

브라우저가 캔버스 요소를 지원하지 않습니다.

Example

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
 
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
 
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

---

Draw Circular Gradient

브라우저가 캔버스 요소를 지원하지 않습니다.

Example

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
 
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
 
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

---

Draw Image

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);

---

HTML Canvas Tutorial

HTML 캔버스 자습서

To learn all about HTML <canvas>, Visit our complete HTML Canvas Tutorial.

HTML <canvas>에 대한 모든 정보를 얻으려면 전체 HTML 캔버스 자습서를 방문하십시오 .

---

출처 : https://www.w3schools.com/html/html5_canvas.asp