Canvas жана SVG ортосундагы айырма эмнеде?

Canvas — бул JavaScript жардамында реалдуу убакыт режиминде графика тартуу үчүн растр API. Ал пикселдерди кенепке чийет:

SVG (Өлчөмү өзгөрүлмө вектордук графика) — бул XML формат, ал 2D вектордук графиканы сүрөттөйт. Ал фигураларды, сызыктарды, текстти жана башка элементтерди сүрөттөйт:

Негизги айырмачылыктар:

• Негиз: Canvas — пикселдер, SVG — векторлор (математикалык сүрөттөмөлөр).
• Чийүү ыкмасы: Canvas — императивдүү (чийүү буйруктары), SVG — декларативдүү (элементтердин сүрөттөмөсү).
• Масштабдоо: Canvas сапатын жоготуу менен масштабдалып жатат (растр), SVG сапатын жоготпостон масштабдолот (вектор).
• Өндүрүмдүүлүк: Canvas динамикалык графика, анимациялар, оюндар үчүн жакшы. SVG статикалык, татаал графика, диаграммалар үчүн жакшы.
• Жеткиликтүүлүк: SVG элементтери DOM аркылуу жеткиликтүү, CSS жана JavaScript менен өзгөртүлүшү мүмкүн. Canvas пиксель деңгээлинде чийет, жеке элементтер жеткиликтүү эмес.
• Интерактивдүүлүк: SVGдө интерактивдүүлүк элементтер деңгээлинде интеграцияланган. Canvasта, чычкан/тийүү окуяларын көзөмөлдөө жана кайсы пикселдерге тийгенин аныктоо керек.
• Формат: Canvas — <canvas> элемент жана JavaScript API. SVG — өзүнчө XML формат, ал түз эле HTMLге киргизилиши мүмкүн же файл катары (.svg) колдонулат.

Мисал — дөңгөлөк түзүү:

// Canvas
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill();

<!-- SVG -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="red" />
</svg>