Estoy leyendo algo en la biblioteca y el enlace está muerto, así que quería volver a intentar hacer un lienzo de Java... bueno, aquí
indow.addEventListener('load', eventWindowLoaded, false); function eventWindowLoaded() { canvasApp(); } function canvasApp() { var theCanvas = document.getElementById('my_first_canvas'); var my_canvas = theCanvas.getContext('2d'); my_canvas.strokeRect(0, 0, 200, 225) // to start, draw a border around the canvas //draw face my_canvas.beginPath(); my_canvas.arc(100, 100, 75, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false); // circle dimensions my_canvas.strokeStyle = "black"; // circle outline is black my_canvas.lineWidth = 3; // outline is three pixels wide my_canvas.fillStyle = "yellow"; // fill circle with yellow my_canvas.stroke(); // draw circle my_canvas.fill(); my_canvas.closePath(); // now , draw left eye my_canvas.fillStyle = "black"; my_canvas.beginPath(); my_canvas.arc(65, 70, 10, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false); // circle dimstions my_canvas.stroke(); // draw circle my_canvas.fill(); //fill in circel my_canvas.closePath(); // now the right eyes my_canvas.beginPath(); my_canvas.arc(135, 70, 10, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false); // circle dimstions my_canvas.stroke(); // draw circle my_canvas.fill(); //fill in circel my_canvas.closePath(); // draw smile my_canvas.lineWidth = 6; my_canvas.beginPath(); my_canvas.arc(99, 120, 35, (Math.PI / 180) * 0, (Math.PI / 180) * -180, false); // semicircle dimensions my_canvas.stroke(); my_canvas.closePath(); // Smiley speaks! my_canvas.fillStyle = "black"; my_canvas.font = '5000px _sans'; my_canvas.fillText("Hello Canvas!", 45, 200); } <canvas width="10000" heigth="55500" id="my_first_canvas"> Your browsers does not support HTML5 canvas. Try using Chrome,Firefox,Safari or MS Edge. </canvas>pero lo arruiné solo mostró toda la sonrisa. ¿Me perdí deletrear algo? He estado mirando esta página durante aproximadamente 2 horas. Lo había hecho hace más de una semana y acabo de leer que estoy acumulando el elemento html siendo fg.
Esta es una mejor práctica
var theCanvas = document.getElementById('my_first_canvas'); theCanvas.width = window.innerWidth; theCanvas.height = window.innerHeight;En el HTML, escribiste mal la altura. Funcionó para mí después de eso.
<canvas width="10000" height="5600" id="my_first_canvas"> Your browsers does not support HTML5 canvas. Try using Chrome,Firefox,Safari or MS Edge. </canvas>