Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Ресайз холста canvas (https://javascript.ru/forum/misc/78201-resajjz-kholsta-canvas.html)

Начинающий-Js-кодер 09.08.2019 14:41

Ресайз холста canvas
 
Подскажите, как можно сделать изменение размеров холста, но не под размер экран а произвольно. Например сделать снизу кнопку-жмешь на нее и холст был 400 на 300 а стал 500 на 300. Но все что было до этого там нарисовано должно не перерисовываться. В этом и заключается вся загвоздка.
Гуглил. Только ресайз нашел.

MC-XOBAHCK 09.08.2019 14:49

А если в css попробовать свойство transform
transform: scale(1.5);

Начинающий-Js-кодер 09.08.2019 15:16

Цитата:

Сообщение от MC-XOBAHCK (Сообщение 511414)
А если в css попробовать свойство transform
transform: scale(1.5);

Я же писал:сделать изменение размеров холста, но не под размер экран а произвольно

SuperZen 09.08.2019 15:34

<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>

тогда меняется перспектива )

рони 09.08.2019 16:08

: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-кодер 09.08.2019 17:26

Большое всем спасибо.
Рони, я так понимаю по твоему коду ты отрисовываешь все заново, так?

рони 09.08.2019 17:52

Цитата:

Сообщение от Начинающий-Js-кодер
так?

да

Начинающий-Js-кодер 09.08.2019 18:04

Как думаешь такой метод для динамических а не статических объектов подойдет? то есть если будет не заранее залитый прямоугольник, а допустим пользователь что-то мышкой нарисует.
Просто кэш насколько я понимаю в канвасе не предусмотрен, не просядет браузер?

рони 09.08.2019 18:35

Начинающий-Js-кодер,
всё зависит как делать?

Начинающий-Js-кодер 09.08.2019 18:59

Не понял тебя


Часовой пояс GMT +3, время: 05:48.