HTML5 Canvas

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

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

 

HTML Canvas 란 무엇입니까?

HTML <canvas>요소는 JavaScript를 통해 즉석에서 그래픽을 그리는 데 사용됩니다.

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

Canvas에는 경로, 상자, 원, 텍스트를 그리고 이미지를 추가하는 몇 가지 방법이 있습니다.

 

캔버스 예

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

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

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

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

 

선을 그리다

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

Your browser does not support the HTML5 canvas tag.

 

원 그리기

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

Your browser does not support the HTML5 canvas tag.

 

텍스트 그리기

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

Your browser does not support the HTML5 canvas tag.

 

획 텍스트

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

Your browser does not support the HTML5 canvas tag.

 

선형 그라디언트 그리기

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);

Your browser does not support the HTML5 canvas tag.

 

원형 그라디언트 그리기

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);

Your browser does not support the HTML5 canvas tag.

 

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

Image to use:

Canvas to fill:

Your browser does not support the HTML5 canvas tag.