Decidí probar los gráficos de JavaScript hoy y logré encontrar una función llamada draw() que se supone que obtiene el contexto de dibujo de un objeto de lienzo y llama a algunos métodos de dibujo de un objeto de lienzo para dibujar una figura.
Lógica
Codifiqué una etiqueta html de lienzo y le di una id . Accedí al objeto de lienzo desde mi función JavaScript draw() y luego accedí al mismo contexto de dibujo de dos dimensiones de lienzo y tomé algunas medidas en los métodos de dibujo que se encuentran en el contexto de dibujo de dos dimensiones objeto.
Expectativa
Esperaba que mi código dibujara un círculo negro en el lienzo en las etiquetas del cuerpo cuando hago clic en el botón dibujar, pero parece que hay un problema con la función draw() , por favor ayuda
function draw() { //get the drawing canvas let canvas = document.getElementById("mycanvas"); //check if the context returns true if (canvas.getContext) { let ctx = canvas.getContext('2d'); //get the co ordinates let X = canvas.width / 2; let Y = canvas.height / 2; //define the radius let R = 45; //begin drawing the circle ctx.beginPath(); ctx.arc(X, Y, R, O, 2 * Math.PI, false); //set the thickness of the draw print ctx.lineWidth = 3; //set the color of the draw print ctx.strokeStyle = "#111"; //start drawing the object ctx.stroke(); } } canvas { height: 300px; width: 300px; } .mybutton { background: #964b00; color: #fff; font-size: 22px; padding: 5px; font-family: serif; text-align: center; } <!--declare a canvas object we will use to draw the circle--> <center><canvas id="mycanvas"></canvas></center> <center><button class="mybutton" onclick="draw()">mybutton</button></center>Pasó una variable indefinida (O) para el parámetro sAngle.
Supongo que tenía la intención de pasar 0, lo que hará que funcione (en radianes, 0 está en la posición de las tres en punto del círculo del arco)
function draw() { //get the drawing canvas let canvas = document.getElementById("mycanvas"); //check if the context returns true if (canvas.getContext) { let ctx = canvas.getContext('2d'); //get the co ordinates let X = canvas.width / 2; let Y = canvas.height / 2; //define the radius let R = 45; //begin drawing the circle ctx.beginPath(); ctx.arc(X, Y, R, 0, 2 * Math.PI, false); //set the thickness of the draw print ctx.lineWidth = 3; //set the color of the draw print ctx.strokeStyle = "#111"; //start drawing the object ctx.stroke(); } } canvas { height: 300px; width: 300px; } .mybutton { background: #964b00; color: #fff; font-size: 22px; padding: 5px; font-family: serif; text-align: center; } <!--declare a canvas object we will use to draw the circle--> <center><canvas id="mycanvas"></canvas></center> <center><button class="mybutton" onclick="draw()">mybutton</button></center>Defina la variable 'O' que da el error. agregue let O =50 en draw() obtendrá el resultado