[JS] CanvasRenderingContext2D 정리 1

안녕하세요, Einere입니다.

(ADblock을 꺼주시면 감사하겠습니다.)

---

이번 포스트에서는

CanvasRenderingContext2D의 속성들에 대해 정리해보겠습니다.

 

 

 

properties

canvas

read-only reference to the HTMLCanvasElement object that is associated with a given context.
It might be null if there is no associated

canvas속성은 HTMLCanvasElement객체를 가리키는 읽기 전용 속성입니다. 만약 관련 canvas객체가 없다면, 값은 null이 됩니다.

example

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

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.canvas // HTMLCanvasElement

 

 

fillStyle

The CanvasRenderingContext2D.fillStyle property of the Canvas 2D API specifies the color, gradient, or pattern to use inside shapes.
The default style is #000 (black).

fillStyle속성은 도형 내부의 색, 그래디언트, 패턴을 정의합니다.

 

example

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const gradient = this.ctx.createLinearGradient(10, 10, 100, 100);
gradient.addColorStop(0, "#F2D3DE");
gradient.addColorStop(1, "#83ABE3");
this.ctx.fillStyle = gradient;
this.ctx.fillRect(10, 10, 100, 100);

 

 

font

The CanvasRenderingContext2D.font property of the Canvas 2D API specifies the current text style to use when drawing text.
This string uses the same syntax as the CSS font specifier.

font는 현재 텍스트 스타일을 정의합니다.  CSS와 동일하게 사용합니다.

 

example

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.font = 'bold 48px serif';
ctx.strokeText('Hello world', 50, 100);

 

 

globalAlpha

The CanvasRenderingContext2D.globalAlpha property of the Canvas 2D API specifies the alpha (transparency) value that is applied to shapes and images before they are drawn onto the canvas.

globalAlpha속성은 아직 캔버스에 그려지지 않은 도형과 이미지에 적용되는 투명도 값입니다.

 

example

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.globalAlpha = 0.5;

ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);

ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

 

 

lineCap

The CanvasRenderingContext2D.lineCap property of the Canvas 2D API determines the shape used to draw the end points of lines.

lineCap속성은 선의 끝의 모양을 결정합니다. 가능한 값으로는 "butt", "round", "square"가 있습니다.

 

example

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineWidth = 15;
ctx.lineCap = 'round';
ctx.lineTo(100, 100);
ctx.stroke();

 

 

lineJoin

The CanvasRenderingContext2D.lineJoin property of the Canvas 2D API determines the shape used to join two line segments where they meet. This property has no effect wherever two connected segments have the same direction, because no joining area will be added in this case.
Degenerate segments with a length of zero (i.e., with all endpoints and control points at the exact same position) are also ignored.

lineJoin속성은 서로 다른 선이 만나는 경우, 어떻게 연결할지 정의합니다. 만약 수평으로 만나거나 길이가 0인 선분에 대해서는 무시됩니다.

가능한 값으로는 "bevel", "round", "miter"가 있습니다.

 

example

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.lineWidth = 20;
ctx.lineJoin = 'round';
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(190, 100);
ctx.lineTo(280, 20);
ctx.lineTo(280, 150);
ctx.stroke();

 

 

lineWidth

The CanvasRenderingContext2D.lineWidth property of the Canvas 2D API sets the thickness of lines.

lineWidth속성은 선의 굵기를 정의합니다.

 

example

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.lineWidth = 15;

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(130, 130);
ctx.rect(40, 40, 70, 70);
ctx.stroke();

 

 

shadowBlur

The CanvasRenderingContext2D.shadowBlur property of the Canvas 2D API specifies the amount of blur applied to shadows.
The default is 0 (no blur).

shadowBlur속성은 그림자에 흐림효과를 적용합니다.

 

example

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Shadow
ctx.shadowColor = 'red';
ctx.shadowBlur = 15;

// Rectangle
ctx.fillStyle = 'blue';
ctx.fillRect(20, 20, 150, 100);

 

 

ShadowColor

The CanvasRenderingContext2D.shadowColor property of the Canvas 2D API specifies the color of shadows.

shadowBlur은 그림자의 색을 정의합니다.

 

example

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Shadow
ctx.shadowColor = 'red';
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;

// Filled rectangle
ctx.fillRect(20, 20, 100, 100);

// Stroked rectangle
ctx.lineWidth = 6;
ctx.strokeRect(170, 20, 100, 100);

 

 

shadowOffsetX, shadowOffsetY

The CanvasRenderingContext2D.shadowOffsetX property of the Canvas 2D API specifies the distance that shadows will be offset horizontally.

The CanvasRenderingContext2D.shadowOffsetY property of the Canvas 2D API specifies the distance that shadows will be offset vertically.

shadowOffsetX와 shadowOffsetY는 각각 그림자의 가로, 세로 길이를 정의합니다.

 

example

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Shadow
ctx.shadowColor = 'red';
ctx.shadowOffsetY = 25;
ctx.shadowBlur = 10;

// Rectangle
ctx.fillStyle = 'blue';
ctx.fillRect(20, 20, 150, 80);

// Shadow
ctx.shadowColor = 'red';
ctx.shadowOffsetY = 25;
ctx.shadowBlur = 10;

// Rectangle
ctx.fillStyle = 'blue';
ctx.fillRect(20, 20, 150, 80);

 

 

strokeStyle

The CanvasRenderingContext2D.strokeStyle property of the Canvas 2D API specifies the color, gradient, or pattern to use for the strokes (outlines) around shapes. The default is #000 (black).

strokeStyle속성은 선의 색, 그래디언트, 패턴을 정의합니다.

 

example

const ctx = document.getElementById('canvas').getContext('2d');

for (let i = 0; i < 6; i++) {
  for (let j = 0; j < 6; j++) {
    ctx.strokeStyle = `rgb(
        0,
        ${Math.floor(255 - 42.5 * i)},
        ${Math.floor(255 - 42.5 * j)})`;
    ctx.beginPath();
    ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
    ctx.stroke();
  }
}

 

 

textAlign

The CanvasRenderingContext2D.textAlign property of the Canvas 2D API specifies the current text alignment used when drawing text.
The alignment is relative to the x value of the fillText() method. For example, if textAlign is "center", then the text's left edge will be at x - (textWidth / 2).

textAlign속성은 텍스트를 그릴 때, 텍스트의 정렬을 정의합니다. 이 정렬은 fillText()함수의 x값에 영향을 받습니다. 

가능한 값으로는 "left", "right", "center", "start", "end"가 있습니다.

 

example

const canvas = document.getElementById('canvas');
canvas.width = 500;
const ctx = canvas.getContext('2d');
const x = canvas.width / 2;

ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();

ctx.font = '30px serif';

ctx.textAlign = 'left';
ctx.fillText('left-aligned', x, 40);

ctx.textAlign = 'center';
ctx.fillText('center-aligned', x, 85);

ctx.textAlign = 'right';
ctx.fillText('right-aligned', x, 130);

 

 

textBaseline

The CanvasRenderingContext2D.textBaseline property of the Canvas 2D API specifies the current text baseline used when drawing text.

textBasline속성은 텍스트를 그릴 때, 텍스트의 기준선을 정의합니다.

가능한 값으로는  "top", "hanging", "middle", "alphabetic", "ideographic", "bottom"이 있습니다.

 

example

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'];
ctx.font = '36px serif';
ctx.strokeStyle = 'red';

baselines.forEach(function (baseline, index) {
  ctx.textBaseline = baseline;
  let y = 75 + index * 75;
  ctx.beginPath();
  ctx.moveTo(0, y + 0.5);
  ctx.lineTo(550, y + 0.5);
  ctx.stroke();
  ctx.fillText('Abcdefghijklmnop (' + baseline + ')', 0, y);
});

 

 

 

참고

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

CanvasRenderingContext2D