html5-canvas 튜토리얼
html5-canvas 시작하기

Android AngularJS Cordova CSS HTML JavaScript jQuery Node.js PHP SVG
수색…


Html5 캔버스 요소를 웹 페이지에 추가하는 방법

Html5 - 캔버스 ...

  • Html5 요소입니다.
  • 대부분의 최신 브라우저 (Internet Explorer 9 이상)에서 지원됩니다.
  • 기본적으로 투명한 요소입니다.
  • 기본 너비는 300px이고 기본 높이는 150px입니다.
  • 모든 내용이 프로그래밍 방식으로 Canvas에 추가되어야하기 때문에 JavaScript가 필요합니다.

예 : Html5 마크 업과 JavaScript를 모두 사용하여 Html5-Canvas 요소를 만듭니다. 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvasHtml5{border:1px solid red; }
    #canvasJavascript{border:1px solid blue; }
</style>
<script>
window.onload=(function(){

    // add a canvas element using javascript
    var canvas=document.createElement('canvas');
    canvas.id='canvasJavascript'
    document.body.appendChild(canvas);

}); // end $(function(){});
</script>
</head>
<body>

    <!-- add a canvas element using html -->
    <canvas id='canvasHtml5'></canvas>

</body>
</html>

캔버스 크기 및 해상도

캔버스의 크기는 페이지에서 차지하는 영역이며 CSS 너비 및 높이 속성에 의해 정의됩니다. 

canvas {
   width : 1000px;
   height : 1000px;
}

캔버스 해상도는 포함 된 픽셀 수를 정의합니다. 해상도는 canvas 요소의 width 및 height 속성을 설정하여 설정합니다. 지정하지 않으면 캔버스의 기본값은 300x150 픽셀입니다.

다음 캔버스는 위의 CSS 크기를 사용하지만 width 와 height 가 지정되지 않았으므로 해상도는 300 x 150입니다. 

<canvas id="my-canvas"></canvas>

이렇게하면 각 픽셀이 고르지 않게 늘어납니다. 픽셀 양상은 1 : 2입니다. 캔버스가 늘어나면 브라우저는 쌍 선형 필터링을 사용합니다. 이렇게하면 늘어난 픽셀이 흐려지는 효과가 있습니다.

캔버스를 사용할 때 최상의 결과를 얻으려면 캔바스 해상도가 디스플레이 크기와 일치해야합니다.

위의 CSS 스타일을 따라 디스플레이 크기와 일치 시키려면 스타일이 정의한 것과 동일한 픽셀 수로 설정된 width 와 height 캔버스를 추가하십시오. 

<canvas id = "my-canvas" width = "1000" height = "1000"></canvas>

화면 캔버스 끄기

캔버스로 작업 할 때 여러 번 픽셀 데이터를 유지할 수있는 캔버스가 필요할 때가 많습니다. 오프 스크린 캔버스를 작성하고 2D 컨텍스트를 얻는 것은 쉽습니다. 오프 스크린 캔버스는 또한 사용 가능한 그래픽 하드웨어를 사용하여 렌더링합니다.

다음 코드는 단순히 캔버스를 만들고 파란색 픽셀로 채 웁니다. 

function createCanvas(width, height){
    var canvas = document.createElement("canvas"); // create a canvas element
    canvas.width = width;
    canvas.height = height;
    return canvas;
}

var myCanvas = createCanvas(256,256); // create a small canvas 256 by 256 pixels
var ctx = myCanvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0,0,256,256);

많은 경우 오프 스크린 캔버스가 많은 작업에 사용되며 많은 캔버스가있을 수 있습니다. 캔버스의 사용을 단순화하기 위해 캔버스 컨텍스트를 캔버스에 첨부 할 수 있습니다. 

function createCanvasCTX(width, height){
    var canvas = document.createElement("canvas"); // create a canvas element
    canvas.width = width;
    canvas.height = height;
    canvas.ctx = canvas.getContext("2d");
    return canvas;
}
var myCanvas = createCanvasCTX(256,256); // create a small canvas 256 by 256 pixels
myCanvas.ctx.fillStyle = "blue";
myCanvas.ctx.fillRect(0,0,256,256);

캔버스에서 마우스 위치 감지하기

이 예제에서는 캔버스를 기준으로 마우스 위치를 가져 오는 방법을 보여 주므로 (0,0) 은 HTML5 Canvas의 왼쪽 위 모퉁이가됩니다. e.clientX 와 e.clientY 는 클라이언트의 X와 Y에서 캔버스의 left 과 right 위치를 빼는 캔버스의 상단을 기반으로 이것을 변경하기 위해 문서의 상단을 기준으로 마우스 위치를 가져옵니다. 

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "16px Arial";

canvas.addEventListener("mousemove", function(e) { 
    var cRect = canvas.getBoundingClientRect();        // Gets CSS pos, and width/height
    var canvasX = Math.round(e.clientX - cRect.left);  // Subtract the 'left' of the canvas 
    var canvasY = Math.round(e.clientY - cRect.top);   // from the X/Y positions to make  
    ctx.clearRect(0, 0, canvas.width, canvas.height);  // (0,0) the top left of the canvas
    ctx.fillText("X: "+canvasX+", Y: "+canvasY, 10, 20);
});

실행 가능한 예

Math.round 사용하면 캔버스의 경계 사각형에 정수 위치가 없을 수 있으므로 x,y 위치가 정수인지 확인해야합니다.

안녕하세요 세계

HTML 

<canvas id="canvas" width=300 height=100 style="background-color:#808080;">
</canvas>

자바 스크립트 

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "34px serif";
ctx.textAlign = "center";
ctx.textBaseline="middle"; 
ctx.fillStyle = "#FFF";
ctx.fillText("Hello World",150,50);

결과

HTML5 캔버스가있는 Hello World

Html5 Canvas Capabilities & Uses에 대한 색인

캔버스의 기능

캔버스를 사용하면 프로그래밍 방식으로 웹 페이지에 그림을 그릴 수 있습니다.

캔버스 드로잉은 광범위하게 스타일을 지정할 수 있습니다.

캔버스의 용도

드로잉은 캔버스의 어느 위치 에나 결합하여 배치 할 수 있으므로 다음과 같이 만들 수 있습니다.

  • 그림판 / 스케치 응용 프로그램,
  • 빠른 페이스 인터랙티브 게임,
  • 차트, 그래프,
  • Photoshop과 같은 이미징,
  • 플래시와 같은 광고 및 Flashy 웹 콘텐츠.

캔버스를 사용하면 이미지의 빨강, 녹색, 파랑 및 알파 구성 요소 색상을 조작 할 수 있습니다. 이렇게하면 Canvas가 Photoshop과 유사한 결과로 이미지를 조작 할 수 있습니다.

  • 픽셀 수준에서 이미지의 모든 부분을 다시 칠하십시오 (HSL을 사용하는 경우 중요한 조명 및 채도를 유지하면서 이미지를 다시 칠할 수도 있으므로 결과가 누군가 이미지 위에 페인트 칠을 한 것처럼 보이지 않습니다).
  • 이미지의 사람 / 항목 주변의 배경을 "녹아웃"
  • 이미지의 감지 및 채우기 부분 (예 : 클릭 한 꽃잎의 색상을 초록색에서 노란색으로 변경 - 클릭 한 꽃잎)
  • Perspective가 워핑 (예 : 컵 곡선 주위로 이미지 감싸기)하고,
  • 이미지 (예 : 얼굴 인식)를 검사하고,
  • 이미지에 대한 질문에 대답 : 내 주차 자리의 이미지에 주차 된 자동차가 있습니까?
  • 표준 이미지 필터 적용 (회색 음영, 세피아 등)
  • 꿈꾸는 모든 이국적인 이미지 필터 적용 (Sobel Edge Detection),
  • 이미지 결합. 친애하는 할머니 수녀님이 가족 모임에 참석하지 못했다면, 동창회 이미지에 "포토샵"하십시오. 사촌 필을 싫어하십시오 - 그냥 "포토샵으로 데려가,
  • 비디오 재생 / 비디오에서 프레임 가져 오기,
  • 캔버스 내용을 .jpg | .png 이미지 (선택적으로 이미지를 자르거나 주석을 달고 결과를 새 이미지로 내보낼 수도 있음)

캔버스 드로잉의 이동 및 편집 (예 : 액션 게임 만들기)

  • 캔버스에 무언가를 그린 후에는 기존 도면을 이동하거나 편집 할 수 없습니다. 캔버스 드로잉을 움직일 수 있다는 일반적인 오해는 다음과 같은 점을 분명히하는 가치가 있습니다. 기존의 캔버스 드로잉을 편집하거나 이동할 수 없습니다!
  • 캔버스는 매우 빠르게 매우 빨리 그려집니다. 캔버스는 수백 초의 이미지, 텍스트, 선 및 곡선을 초 단위로 그릴 수 있습니다. 사용 가능한 경우 GPU를 사용하여 그리기 속도를 높입니다.
  • 캔버스는 신속하고 반복적으로 무언가를 그린 다음 새로운 위치로 다시 그리는 방식으로 모션의 환상을 만듭니다. 텔레비전과 마찬가지로이 일정한 다시 그리기는 눈에 움직임의 환영을줍니다.

회전

rotate(r) 2 차원의 컨텍스트에있어서, 상기 지정된 시간에 의해 캔버스 회전 r 원점 주위를 라디안.

HTML 

<canvas id="canvas" width=240 height=240 style="background-color:#808080;">
</canvas>

<button type="button" onclick="rotate_ctx();">Rotate context</button>

자바 스크립트 

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#FFF";
ctx.fillText("Hello World", ox, oy);

rotate_ctx = function() {
  // translate so that the origin is now (ox, oy) the center of the canvas
  ctx.translate(ox, oy);
  // convert degrees to radians with radians = (Math.PI/180)*degrees. 
  ctx.rotate((Math.PI / 180) * 15);
  ctx.fillText("Hello World", 0, 0);
  // translate back
  ctx.translate(-ox, -oy);
};

JSfiddle에서의 라이브 데모

이미지 파일에 캔버스 저장

캔버스의 이미지 데이터에 대한 데이터 URI 를 반환하는 canvas.toDataURL() 메서드를 사용하여 이미지 파일에 캔버스를 저장할 수 있습니다.

이 메소드는 두 가지 선택적 매개 변수 인 canvas.toDataURL(type, encoderOptions) 사용할 수 있습니다. type 은 이미지 형식입니다 (생략 된 경우 기본값은 image/png 임). encoderOptions 는 이미지 품질을 나타내는 0과 1 사이의 숫자입니다 (기본값 : 0.92).

여기서 캔버스를 그리고 "Download to myImage.jpg"링크에 캔버스의 데이터 URI를 첨부합니다.

HTML 

<canvas id="canvas" width=240 height=240 style="background-color:#808080;">
</canvas>
<p></p>
<a id="download" download="myImage.jpg" href="" onclick="download_img(this);">Download to myImage.jpg</a>

자바 스크립트 

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#800";
ctx.fillRect(ox / 2, oy / 2, ox, oy);

download_img = function(el) {
  // get image URI from canvas object
  var imageURI = canvas.toDataURL("image/jpg");
  el.href = imageURI;
};

JSfiddle에서 라이브 데모 .



Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow