Quiero dibujar 4 elementos de lienzo. Es decir, quiero dibujar el mismo elemento del lienzo, 4 veces.
Usando una identificación adjunta a un elemento de lienzo, puedo obtenerlo y dibujarlo con éxito.
de main.js
var canvas = document.getElementById('box'); var ctx = canvas.getContext('2d'); var radius = 75; var endPercent = 99; var curPercent = 0; ctx.lineWidth = "10"; ctx.strokeStyle = "green"; function draw(currentPerc){ ctx.clearRect(0,0, canvas.width, canvas.height) ctx.beginPath(); ctx.arc('100', '100', radius, 0, curPercent*currentPerc, false); ctx.stroke(); curPercent++ if(curPercent < endPercent){ requestAnimationFrame(function(){ draw(curPercent/100); }); } } draw();de HomePage.js
<canvas id="box" width="200" height="200" ></canvas>Al comenzar a averiguar cómo dibujaría esto cuatro veces, probé lo siguiente:
Primero en HomePage.js agregué 4 elementos de lienzo con un nombre de clase del mismo nombre de identificación.
de HomePage.js
<canvas class="box" width="200" height="200" ></canvas> <canvas class="box" width="200" height="200" ></canvas> <canvas class="box" width="200" height="200" ></canvas> <canvas class="box" width="200" height="200" ></canvas>luego en el javascript probé lo siguiente:
de Main.js
var canvasCollect = document.querySelectorAll('canvas.box'); canvasCollect.forEach(draw()); var ctx = canvas.getContext('2d'); var radius = 75; var endPercent = 99; var curPercent = 0; ctx.lineWidth = "10"; ctx.strokeStyle = "green"; function draw(currentPerc){ ctx.clearRect(0,0, canvas.width, canvas.height) ctx.beginPath(); ctx.arc('100', '100', radius, 0, curPercent*currentPerc, false); ctx.stroke(); curPercent++ if(curPercent < endPercent){ requestAnimationFrame(function(){ draw(curPercent/100); }); } }Esto no está funcionando. No se renderiza nada.
Cada instancia de HTMLCanvasElement tiene su propio contexto de representación 2D. Si echamos un vistazo dentro de su función draw() , podemos ver las siguientes líneas:
ctx.clearRect(0,0, canvas.width, canvas.height) ctx.beginPath(); ctx.arc('100', '100', radius, 0, curPercent*currentPerc, false); ctx.stroke(); ctx es una variable que apunta a CanvasRenderingContext2D de su elemento <canvas> con el id ' box '.
Tal como está, la función dibujar () simplemente dibujaría en este único lienzo. Para hacer que se dibuje en cualquier lienzo de box de clase, debe abordar el propio contexto de representación 2D de cada uno.
Aquí hay un ejemplo:
var canvasCollect = document.querySelectorAll('canvas.box'); var radius = 75; var endPercent = 100; var curPercent = 0; function draw() { var ctx; canvasCollect.forEach(canvas => { ctx = canvas.getContext('2d'); ctx.lineWidth = "10"; ctx.strokeStyle = "green"; ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.beginPath(); ctx.arc('100', '100', radius, 0, 2 * Math.PI * curPercent / 100, false); ctx.stroke(); ctx.closePath(); }); curPercent++; if (curPercent <= endPercent) { requestAnimationFrame(function() { draw(curPercent); }); } } draw(curPercent); <canvas class="box" width="200" height="200"></canvas> <canvas class="box" width="200" height="200"></canvas> <canvas class="box" width="200" height="200"></canvas> <canvas class="box" width="200" height="200"></canvas>