Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.08.2019, 13:41
Кандидат Javascript-наук
Отправить личное сообщение для Начинающий-Js-кодер Посмотреть профиль Найти все сообщения от Начинающий-Js-кодер
 
Регистрация: 12.06.2016
Сообщений: 130

Ресайз холста canvas
Подскажите, как можно сделать изменение размеров холста, но не под размер экран а произвольно. Например сделать снизу кнопку-жмешь на нее и холст был 400 на 300 а стал 500 на 300. Но все что было до этого там нарисовано должно не перерисовываться. В этом и заключается вся загвоздка.
Гуглил. Только ресайз нашел.
Ответить с цитированием
  #2 (permalink)  
Старый 09.08.2019, 13:49
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

А если в css попробовать свойство transform
transform: scale(1.5);
Ответить с цитированием
  #3 (permalink)  
Старый 09.08.2019, 14:16
Кандидат Javascript-наук
Отправить личное сообщение для Начинающий-Js-кодер Посмотреть профиль Найти все сообщения от Начинающий-Js-кодер
 
Регистрация: 12.06.2016
Сообщений: 130

Сообщение от MC-XOBAHCK Посмотреть сообщение
А если в css попробовать свойство transform
transform: scale(1.5);
Я же писал:сделать изменение размеров холста, но не под размер экран а произвольно
Ответить с цитированием
  #4 (permalink)  
Старый 09.08.2019, 14:34
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

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

тогда меняется перспектива )
Ответить с цитированием
  #5 (permalink)  
Старый 09.08.2019, 15:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064


<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>
Ответить с цитированием
  #6 (permalink)  
Старый 09.08.2019, 16:26
Кандидат Javascript-наук
Отправить личное сообщение для Начинающий-Js-кодер Посмотреть профиль Найти все сообщения от Начинающий-Js-кодер
 
Регистрация: 12.06.2016
Сообщений: 130

Большое всем спасибо.
Рони, я так понимаю по твоему коду ты отрисовываешь все заново, так?
Ответить с цитированием
  #7 (permalink)  
Старый 09.08.2019, 16:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Начинающий-Js-кодер
так?
да
Ответить с цитированием
  #8 (permalink)  
Старый 09.08.2019, 17:04
Кандидат Javascript-наук
Отправить личное сообщение для Начинающий-Js-кодер Посмотреть профиль Найти все сообщения от Начинающий-Js-кодер
 
Регистрация: 12.06.2016
Сообщений: 130

Как думаешь такой метод для динамических а не статических объектов подойдет? то есть если будет не заранее залитый прямоугольник, а допустим пользователь что-то мышкой нарисует.
Просто кэш насколько я понимаю в канвасе не предусмотрен, не просядет браузер?
Ответить с цитированием
  #9 (permalink)  
Старый 09.08.2019, 17:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Начинающий-Js-кодер,
всё зависит как делать?
Ответить с цитированием
  #10 (permalink)  
Старый 09.08.2019, 17:59
Кандидат Javascript-наук
Отправить личное сообщение для Начинающий-Js-кодер Посмотреть профиль Найти все сообщения от Начинающий-Js-кодер
 
Регистрация: 12.06.2016
Сообщений: 130

Не понял тебя
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
cololpicker canvas greenrow Общие вопросы Javascript 10 31.10.2016 17:32
Повтор фото (getUserMedia(),HTML5 Canvas) aspex Элементы интерфейса 1 27.12.2014 16:46
Отрисовка спирали. Canvas. Moonshell Javascript под браузер 3 27.01.2014 19:33
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 13:55
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16