Ресайз холста canvas
Подскажите, как можно сделать изменение размеров холста, но не под размер экран а произвольно. Например сделать снизу кнопку-жмешь на нее и холст был 400 на 300 а стал 500 на 300. Но все что было до этого там нарисовано должно не перерисовываться. В этом и заключается вся загвоздка.
Гуглил. Только ресайз нашел. |
А если в css попробовать свойство transform
transform: scale(1.5); |
Цитата:
|
<style> canvas { border: 1px solid #000; } </style> <canvas id="myCanvas" width="400" height="400"></canvas> <button id="resizeButton">resize button</button> <script> var canvas = document.getElementById("myCanvas") var ctx = canvas.getContext("2d") function update() { ctx.fillStyle = "#FF0000" ctx.fillRect(0, 0, 150, 75) } document.getElementById('resizeButton').addEventListener('click', () => { canvas.width = 600 update() }) update() </script> без перерисовки не получится... если делать финт ушами <style> canvas { border: 1px solid #000; width: 100%; height: 100%; } .canvasWrapper { width: 40px; height: 40px; border: 1px solid #0f0 } </style> <div class="canvasWrapper"> <canvas id="myCanvas"></canvas> </div> <button id="resizeButton">resize button</button> <script> var canvas = document.getElementById("myCanvas") var ctx = canvas.getContext("2d") var canvasWrapper = document.querySelector('.canvasWrapper') function update() { ctx.fillStyle = "#FF0000" ctx.fillRect(0, 0, 50, 50) } document.getElementById('resizeButton').addEventListener('click', () => { // canvas.width = 600 console.log(canvasWrapper) canvasWrapper.style.width = '100px' // update() }) update() </script> тогда меняется перспектива ) |
:write:
<style> canvas { border: 1px solid #000; } </style> <canvas id="myCanvas" width="400" height="400"></canvas> <button id="resizeButton">resize button</button> <script> var canvas = document.getElementById("myCanvas") var ctx = canvas.getContext("2d") function update() { ctx.fillStyle = "#FF0000" ctx.fillRect(0, 0, 150, 75) } document.getElementById('resizeButton').addEventListener('click', () => { var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); canvas.width = 600; ctx.putImageData(imageData, 0, 0); }) update() </script> |
Большое всем спасибо.
Рони, я так понимаю по твоему коду ты отрисовываешь все заново, так? |
Цитата:
|
Как думаешь такой метод для динамических а не статических объектов подойдет? то есть если будет не заранее залитый прямоугольник, а допустим пользователь что-то мышкой нарисует.
Просто кэш насколько я понимаю в канвасе не предусмотрен, не просядет браузер? |
Начинающий-Js-кодер,
всё зависит как делать? |
Не понял тебя
|
Часовой пояс GMT +3, время: 07:32. |