html5 canvas

javascript(=코딩)로

웹페이지에 그림을 그린다

이미지파일 써... 그냥..

코딩으로 그림을 왜 그려..

생각보다 다양한 곳에서 쓰이고 있고

다양한 일들이 가능해집니다.

~~좀만 해도 주변사람들에게 코딩 엄청잘하는 것처럼...~~

촋 로 가는길도 basic 부터~

일단 <canvas>부터 만들어 봅시다~

<canvas id="myCanvas"></canvas>

html에는 이것만!

이 다음 모두 javascript에서 이루어집니다.

단! 사이즈 지정이 필요한 경우는 width, height 속성추가

IE8 이하는 지원하지 않습니다.

<canvas id="myCanvas">IE쓰지마!!!!!!!!!!</canvas>

그럴땐 이렇게 대체 문자열을 넣어주면..

~~그냥 삐뚤어지고 싶은 마음에 사진을..~~

1. 캔버스에 사각형 그리기

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

var context = canvas.getContext("2d");

canvas의 rendering context를 가져옵니다. 2d로

Why 2d? I like 3d!!

항상 왜 2d야? 3d는 불가능해? 3d로 된 튜토리얼 같은거 없어?

아직 브라우저상에 구현되지 않음

~~안됐으면.. 좋켓어~~

는 꿈

응 있어 WebGL

빨리 사각형 만들자고요~

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = 원하는 색;
ctx.fillRect(x, y, width, height);

https://codepen.io/2xel/pen/qQropL

만들어볼까요?

자유한국당

더민주

국민의당

정의당

API 문서를 찾아보니!

캔버스의 처음 너비는 300 x150px 입니다.

곰방눈치재죠잉~

컴잘알~ CSS도 쉽지~ 안해서 못하는거지 하면 잘해~
귀찮아서 안하는 거야~

<canvas id="canvas" style="width: 300px; height: 300px;"></canvas>

의석수가 점점더 차이납니다.

CSS 크기 지정이 초기 캔버스의 비율을 고려하지 않으면 왜곡되어 나타납니다 .

<canvas id="canvas" width="150" height="150"></canvas>

<canvas id="canvas2" style="width: 150px; height: 150px;"></canvas>

<style>
    canvas {
    border: 1px solid black;
    }
</style>

<canvas id="canvas" width="150" height="150"></canvas>
<canvas id="canvas2" style="width: 150px; height: 150px;"></canvas>

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")

ctx.fillStyle = "red"
ctx.fillRect(0, 0, 100, 100)

var canvas2 = document.getElementById("canvas2")
var ctx2 = canvas2.getContext("2d")

ctx2.fillStyle = "blue"
ctx2.fillRect(0, 0, 100, 100)

1. 캔버스에 사각형 그리기

2. 이미지에 필터 적용해보기

context.drawImage(image, x, y);

context.drawImage(image, x, y, width, height);

이미지를 그려라

이미지 크기를 늘리거나 줄여서 그려라

https://codepen.io/2xel/pen/eQRXmp?editors=1010

var imageData = 
    context.getImageData(0, 0, canvas.width, canvas.height);

// ImageData {data: Uint8ClampedArray(1000000), width: 500, height: 500}

이미지의 정보를 가지고옴

var pixelData = imageData.data;

이미지 정보의 픽셀 정보

이미지의 픽셀 갯수

var numPixels = imageData.width * imageData.height;

R	G	B	A	R	G	B	A	R	......

첫번째 픽셀의 RGBA

두번째 픽셀의 RGBA

이미지의 RGBA값을 가지고 있는1차원 배열

모든 픽셀의 정보를 수정하기 위해서..

var pixelData = imageData.data;
for (var i = 0; i < numPixels; i++) {
  var r = pixelData[i * 4];
  var g = pixelData[i * 4 + 1];
  var b = pixelData[i * 4 + 2];
}

for (var i = 0; i < numPixels; i+=4) {
  var r = pixelData[i];
  var g = pixelData[i + 1];
  var b = pixelData[i + 2];
}

context.putImageData(imageData, 0, 0);
// 그려라

https://codepen.io/2xel/pen/VVWoGw?editors=0010

다양한 필터 적용 실습

3. 이미지 사이즈 조정

별거는 없고 File API를 이용해 파일을 읽은 후 canvas로 리사이징

var file = document.getElementById("file");
  file.onchange = function() {
    var fileList = file.files;
    var reader = new FileReader();

    // 파일을 읽는다.
    reader.readAsDataURL(fileList[0]);

    // 로드가 완료되면
    reader.onload = function() {
      var tempImg = new Image();
      tempImg.src = reader.result;
      
      // 이미지 로드가 완료되면
      tempImg.addEventListener("load", function() {
        var thumbnail = document.getElementById("thumbnail");
        var thumbnailContext = thumbnail.getContext("2d");

        // 리사이징
        thumbnailContext.drawImage(tempImg, 0, 0, 100, 100);
      });
    };
  };

canvas1 발표

By leejaemin