Graphics
SVG(Scalable Vector Graphic) 2
- https://developer.mozilla.org/ko/docs/Web/SVG/Tutorial
- https://a11y.gitbook.io/graphics-aria/svg-graphics
- SVG Tag
- 문자열 : text
- x, y, fill, font-family, font-size
- dx, rotate, textLength
- textPath
- 선 : path
- d
- M : 이동
- L : 직선
- H : 가로선
- V : 세로선
- C : 곡선
- S
- Q
- T
- A : 원호
- Z : Path 닫기
- d
- 선 : line
- x1, y1, x2, y2
- 직선 그룹: polyline
- points
- 사각형 : rect
- x, y, width, height, rx, ry / opacity
- 원 : circle
- cx, cy, r
- 타원 : ellipse
- rx, ry, cx, cy
- 다각형 : polygon
- points
- pattern
- image
- x, y, width, height
- defs
- linearGradient
- radialGradient
- clipPath
- mask
- filter
- 문자열 : text
- transform
- translate, rotation, scale, ...
// let fragment = document.createDocumentFragment();
let fragment = new DocumentFragment();
let tr = document.createElement('tr');
fragment.appendChild(tr);
target.appendChild(fragment);
Canvas
- https://developer.mozilla.org/ko/docs/Web/API/Canvas_API
- https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial
- Canvas API
- 문자열
- fillText("문자열", x, y, maxWidth);
- strokeText("문자열", x, y, maxWidth);
- 이동: moveTo(x, y)
- 직선: lineTo(x, y)
- Path
- beginPath, closePath, stroke, fill
- 사각형: strokeRect, fillRect, clearRect
- 사각형 : rect
- 호 : arc(x, y, radius, startAngle, endAngle, anticlockwise), arcTo
- 곡선: quadraticCurveTo, bezierCurveTo
- createLinearGradient
- createRadialGradient
- createPattern
- shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor
- save, restore
- translate, rotate, scale, transform
- clip()
- createImageData
- getImageData, putImageData, toDataURL
- 문자열
- Path2D
Last modified, 2021.06.29 ~ 2021.06.29, version 0.01
최종 수정일: 2022-10-24 19:17:28
이전글 :
다음글 :