• Graphics
• SVG(Scalable Vector Graphic) 2
• Canvas

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 닫기

  • 선 : 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

• 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

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

ctx.strokeStyle = "rgb(255,2556,255)";  //--- 선 색
ctx.lineWidth = 3;                      //--- 선 두께
ctx.lineCap = "butt|round|square";      //--- 선의 끝 모양
ctx.lineJoin = "round|bevel|miter";     //--- 선의 연결부위 모양
ctx.miterLimit = 10.0;
ctx.getLineDash();
ctx.setLineDash([10, 2]);
ctx.lineDashOffset = 0;

ctx.fillStyle = "rgba(255,255,255,0.5)";//--- 채우기 색

ctx.strokeStyle = "rgb(255,2556,255)";  //--- 글자 색
ctx.font = "32px sans-serif";			//--- 글자 폰트
ctx.textAlign = "start|end|left|center|right";  //--- 글자 정렬
ctx.textBaseline = "top|middle|bottom|hanging|alphabetic|ideographic";			//--- 베이스 라인 정렬
ctx.direction = "ltr|rtl|inherit";

ctx.beginPath();
//--- 도형 그리기
ctx.stroke();                           //--- 경계선 그리기
ctx.fill();                             //--- 채워서 그리기
ctx.fillText("문자열", x, y);            //--- 글자 그리기


let rectangle = new Path2D();
var p = new Path2D('M10 10 h 80 v 80 h -80 Z');    //--- SVG의 path 사용
rectangle.rect(10, 10, 50, 50);
ctx.stroke(rectangle);

//--- 애미메이션
function draw() {
  window.requestAnimationFrame(draw);
}

​

Last modified, 2021.06.29 ~ 2021.06.29, version 0.01

---