Canvas Method

Canvas에서 사용하는 Method 정리

canvas와 context 객체

var canvas = document.getElementById( ‘canvas’ );
var context = canvas.getContext( ‘2d’ );

레티나를 대응하기 위한 canvas resize

var devicePixelRatio = window.devicePixelRatio || 1;
var backingStoreRatio = context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
var ratio = devicePixelRatio / backingStoreRatio;
var wWidth = window.innerWidth;
var wHeight = window.innerHeight;

canvas.width = wWidth * ratio;
canvas.height = wHeight * ratio;
canvas.style.width = wWidth + ‘px’;
canvas.style.height = wHeight + ‘px’;
context.scale(ratio, ratio);

채울 색상

context.fillStyle = “#666”;

선의 색상

context.strokeStyle = ‘#f00’;

선의 두께

context.lineWidth = 20;

선의 끝 모양

context.lineCap = ‘butt’; //기본
context.lineCap = ’round’; //원형
context.lineCap = ‘square’; //사각형

선 긋기

context.beginPath();
context.moveTo( 150, 150 );
context.lineTo( 200, 150 );
context.closePath();
context.stroke();

arc

arc(x, y, radius, startAngle, endAngle, anticlockwise);
context.arc(100, 100, 75, 0, Math.PI * 3/2, false);

이차(Quadratic )곡선

quadraticCurveTo(cp1x, cp1y, x, y)

context.beginPath();
context.moveTo(150, 150);
context.quadraticCurveTo(240, 0, 450, 150);
context.lineWidth = 7;
context.strokeStyle = ‘red’;
context.stroke();

베지에(Bezier) 곡선

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

context.beginPath();
context.moveTo(150, 150);
context.bezierCurveTo(170, 40, 250, 0, 350, 200);
context.lineWidth = 7;
context.strokeStyle = ‘red’;
context.stroke();

선의 연결지점(모서리)

context.lineJoin = ‘miter’ / ’round’ / ‘bevel’
miter – 초기설정 값
round – 원모양
bevel – 모서리를 깎은 형태

사각형 그리기

rect( x, y, width, height )

context.beginPath();
context.rect(50, 50, 150, 50);
context.fillStyle = ‘blue’;
context.fill();
context.lineWidth = 10;
context.strokeStyle = ‘red’;
context.stroke();

색칠된 직사각형을 그리기

fillRect(x, y, width, height)

직사각형 윤곽선 그리기

strokeRect(x, y, width, height)

특정 부분을 지우는 직사각형 그리기

clearRect(x, y, width, height)

Linear Gradient

createLinearGradient( x0, y0, x1, y1 )

var gradient = context.createLinearGradient(0, 0, 300, 500);
gradient.addColorStop(0, ‘#ff0000’);
gradient.addColorStop(0.5, ‘#00ff00’);
gradient.addColorStop(1, ‘#0000ff’);
context.fillStyle = gradient;
context.rect( 0, 0, 500, 100 );
context.fill();

Radial Gradient

createRadialGradient(x0, y0, r0, x1, y1, r1);

var grd = context.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop( 0, ‘red’ );
grd.addColorStop( 1, ‘black’ );
context.fillStyle = grd;
context.fillRect(10,10,300,300);

Create Pattern

createPattern(image,”repeat|repeat-x|repeat-y|no-repeat”);

var img = new Image();
img.onload = function() {
  var pattern = context.createPattern( img, ‘repeat’ );
  context.rect(0, 0, canvas.width, canvas.height);
  context.fillStyle = pattern;
  context.fill();
};
img.src = ‘img url…’;

DrawImage

drawImage(img,x,y)
drawImage(img,x,y,width,height)
drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

var img = new Image();
img.onload = function() {
  context.drawImage(img, 50, 50);
};
img.src = ‘img url…’

fillText / strokeText

fillText(text, x, y [, maxWidth])
strokeText(text, x, y [, maxWidth])

context.font = ’48px serif’;
context.strokeStyle = ‘#000000’;
context.lineWidth = 2;
context.fillStyle = ‘#ff0000’;
context.fillText(‘Hello world’, 10, 50);
context.strokeText(‘Hello world’, 10, 50);

TextAlign

context.textAlign = ‘start’ | ‘end’ | ‘left’ | ‘right’ | ‘center’;

TextBaseline

MeasureText

var text = ‘Hello World!’; context.font = ’35pt serif’; context.textBaseline = ‘bottom’; context.fillStyle = ‘blue’; context.fillText(‘text’, 50, 50); var metrics = context.measureText(text); var width = metrics.width; console.log( ‘width’, width );

https://developer.mozilla.org/ko/docs/Web/HTML/Canvas/Tutorial/Drawing_shapes

https://www.w3schools.com/