• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

262
Views
¿Puede copiar solo un área específica de un lienzo a otro?

En este momento, estoy renderizando un mapa una vez en un lienzo fuera de pantalla, que luego se copia en el lienzo principal en cada fotograma, por lo que no tengo que volver a renderizar cada objeto en mi mapa en cada fotograma, lo que se vuelve muy lento, mi lienzo fuera de pantalla necesita ser relativamente grande para adaptarse a todo el mapa, aunque todo el lienzo se copia en los canas normales en cada cuadro que tampoco es tan eficaz, entonces mi pregunta es; ¿Hay alguna forma de copiar solo una sección de un lienzo a otro lienzo, para que no tenga que copiar todo?

about 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Puede drawImage la imagen de su lienzo:

 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); const offscreen = Object.assign( document.createElement("canvas"), { width: 2500, height: 2500 } ); makeNoise(offscreen.getContext("2d")); canvas.onmousemove = evt => { const x = evt.clientX - canvas.offsetLeft; const y = evt.clientY - canvas.offsetTop; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(offscreen, x - offscreen.width / 2, y - offscreen.height / 2); } // fills a context with noise, // we use it only to draw somehing on the offscreen canvas function makeNoise(ctx) { const img = new ImageData(ctx.canvas.width, ctx.canvas.height); const data = new Uint32Array(img.data.buffer); for (let i = 0; i<data.length; i++) { data[i] = Math.random() * 0xFFFFFF + 0xFF000000; } ctx.putImageData(img, 0, 0); }
 Use your mouse to move the offscreen canvas<br> <canvas><canvas>

about 3 years ago · Juan Pablo Isaza Report

0

getImageData(sx, sy, sw, sh)

le permite extraer datos de imagen basados en una coordenada X/Y y un ancho y alto, y

putImageData(imageData, dx, dy)

le permite colocarlo en una coordenada X/Y.

O use drawImage , que le permite usar el lienzo existente como "entrada" directamente, y puede especificar X/Y y ancho/alto tanto para el origen como para el destino:

 drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error