Necesito una matriz que pueda incluir dibujos en lienzo y/o imágenes.
Ejemplo de dibujo a continuación:
function drawCircle() { ctx.beginPath(); ctx.arc(Life.x, Life.y, Life.radius, 0, Math.PI * 2); ctx.fillStyle = 'black; ctx.fill(); ctx.strokeStyle = 'orange'; ctx.stroke(); ctx.closePath(); }Ejemplo de imagen a continuación:
const LIFE_IMG=new Image(); LIFE_IMG.src="images/life.png"Formación;
let LIFE_ARRAY=[LIFE_IMG,LIFE_IMG,LIFE_IMG];Dibujar:
function drawLife(imgY2,imgWidth,imgHeight){ LIFE_ARRAY.forEach(function(item, index) { let offsetY,imgX,imgY; offsetY=(imgHeight+5)*(index+1) imgX=(SCOREBOARD_WIDTH/2)-(imgWidth/2) imgY=imgY2 } ctx.drawImage(item, imgX, imgY+offsetY, imgWidth, imgHeight); }) }necesito poder
empuje el dibujo del lienzo a la matriz
determinar si el valor de la matriz es una imagen o un dibujo de lienzo
dibujar el lienzo dibujo o la imagen
La parte 2 se respondió en un antiguo hilo de desbordamiento de pila con:
function isImage(i) {return i instanceof HTMLImageElement;}pero no puedo encontrar la manera de vincularlo a mi código.
¡Cualquier ayuda sería muy apreciada!
Por lo general, solo tiene un elemento <canvas> en pantalla. Así que tu código de muestra:
let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); let Life = { x: 100, y: 100, radius: 50 }; function drawCircle() { ctx.beginPath(); ctx.arc(Life.x, Life.y, Life.radius, 0, Math.PI * 2); ctx.fillStyle = 'black'; ctx.fill(); ctx.strokeStyle = 'orange'; ctx.stroke(); ctx.closePath(); } drawCircle(); <canvas id="canvas"></canvas>dibuja un círculo en el contexto del lienzo en pantalla. Sin embargo, esta es solo una operación de dibujo, por lo que no hay ninguna referencia a que sea una especie de objeto. Al final, son solo datos de píxeles en algún lugar del lienzo.
Aunque no veo un caso de uso, lo que quiere lograr se puede hacer, por supuesto. El truco aquí es crear lienzos individuales fuera de la pantalla para todos los dibujos de lienzo que desee almacenar en la matriz.
Se puede crear un elemento <canvas> en tiempo de ejecución usando:
document.createElement('canvas') Si modificamos un poco su función drawCircle() para que se dibuje en un lienzo fuera de la pantalla y lo devuelva, incluso puede llamar a esta función desde dentro de su matriz para insertar su referencia.
function drawCircle() { let tempCanvas=document.createElement('canvas'); let tempCtx=tempCanvas.getContext('2d'); tempCtx.beginPath(); tempCtx.arc(Life.x, Life.y, Life.radius, 0, Math.PI * 2); tempCtx.fillStyle = 'black'; tempCtx.fill(); tempCtx.strokeStyle = 'orange'; tempCtx.stroke(); tempCtx.closePath(); return tempCanvas; } Como ya se habrá dado cuenta, una imagen es una instancia de HTMLImageElement . Del mismo modo, un lienzo es de HTMLCanvasElement . Esto se puede usar en el bucle forEach para distinguir uno de otro.
Aquí hay un ejemplo:
let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); let Life = { x: 100, y: 100, radius: 50 }; function drawCircle() { let tempCanvas = document.createElement('canvas'); let tempCtx = tempCanvas.getContext('2d'); tempCtx.beginPath(); tempCtx.arc(Life.x, Life.y, Life.radius, 0, Math.PI * 2); tempCtx.fillStyle = 'black'; tempCtx.fill(); tempCtx.strokeStyle = 'orange'; tempCtx.stroke(); tempCtx.closePath(); return tempCanvas; } drawCircle(); const LIFE_IMG = new Image(); LIFE_IMG.src = "images/life.png"; let LIFE_ARRAY = [LIFE_IMG, drawCircle(), LIFE_IMG]; LIFE_ARRAY.forEach(function(item, index) { if (item instanceof HTMLImageElement) { console.log("an Image"); } if (item instanceof HTMLCanvasElement) { console.log("a Canvas"); } }); <canvas id="canvas"></canvas>