Редактор графики с использованием SVG

Question

У меня есть проект для школы, и мне нужно построить и графический редактор (что-то похожее на краску) с помощью SVG. Я нашел код для функций в JavaScript, чтобы нарисовать круг, строку и т. Д., Но когда я пытаюсь добавить их в функцию onclick, она не работает.

function drawCircle(position) { 
//  var radius = Math.sqrt(Math.pow((dragStartLocation.x - position.x), 2) + Math.pow((dragStartLocation.y - position.y), 2)); 
//  context.beginPath(); 
//  context.arc(dragStartLocation.x, dragStartLocation.y, radius, 0, 2 * Math.PI, false); 
} 

Это HTML

<button onclick="drawCircle()" class="button">Dreptunghi</button> 

Answer 1

Холст (html5) Версия

Вы пытаетесь использовать html5-canvas но не svg.

Если это так:

1. Добавить canvas тег в вашем HTML.
2. Определена функция drawCircle как код выше.

function drawCircle() { 
 
    var canvas = document.getElementById('myCanvas'); 
 
    var context = canvas.getContext('2d'); 
 
    var centerX = canvas.width/2; 
 
    var centerY = canvas.height/2; 
 
    var radius = 70; 
 

 
    context.beginPath(); 
 
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
 
    context.fillStyle = 'green'; 
 
    context.fill(); 
 
    context.lineWidth = 5; 
 
    context.strokeStyle = '#003300'; 
 
    context.stroke(); 
 
}

<button onclick="drawCircle()">Dreptunghi</button> 
 
<br /> 
 
<canvas id="myCanvas" width="578" height="200"></canvas>

Update

SVG Версия

function drawCircle() { 
 
    document.getElementById('svg').innerHTML = '<circle cx="100" cy="100" r="70" stroke="black" stroke-width="5" fill="green" />'; 
 
}

<button onclick="drawCircle()">Dreptunghi</button> 
 
<br /><br /> 
 
<svg height="200" width="578" id="svg"></svg>

---

Для рисования с SVG, я рекомендую использовать библиотеку, такую ​​как svg.js

function drawCircle() { 
 
    var draw = SVG('draw').size(578, 200); 
 
    var circle = draw.circle(70).attr({fill:'green',stroke:'#003300', 'stroke-width': 5, cx:50, cy:50}); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.2.5/svg.js"></script> 
 
<button onclick="drawCircle()">Dreptunghi</button> 
 
<br /><br /> 
 
<div id="draw"></div>