Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как изменить размер Canvas(самого холста)? (https://javascript.ru/forum/misc/64001-kak-izmenit-razmer-canvas-samogo-kholsta.html)

Сергей16 13.07.2016 20:16

Как изменить размер Canvas(самого холста)?
 
Добрый день.
Как изменить Width самого холста в Canvas,через value input'a?
Изменить цвет по клику -получилось, а изменить размер никак не могу.
Помогите люди -добрые.
<html>
<head>
  <script src="http://code.jquery.com/jquery.min.js"></script>
  <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
  <script>
      $(document).ready(function() {
 
          var canvas = new fabric.Canvas('canvas');

      });
  </script>
</head>
<body>
<input type="button" value="Изменить цвет" onclick="document.getElementById('canvas').style.background='#999999'"/>
<input type="button" value="Изменить размер" onclick="document.getElementById('canvas').style.width.set=jQuery('digit01').value+'px'"/>

 <input type="text" id="digit01" title="длина" value="800"   placeholder="3000" "
class="cElementForSelect calcElement"/>

<input type="text" id="digit02" title="ширина" value="800"  placeholder="600" "
class="cElementForSelect calcElement"/> 
<div id="images">
</div>
<div class="col-xs-6 " id="canvas-container"  style="border:  1px solid black ">
<canvas id="canvas" style=" box-shadow: 0 0 5px 1px black"></canvas>
<canvas id="canvas1" style=" box-shadow: 0 0 0px 1px black;margin: 10px auto;"></canvas></div>
</body>
</html>

рони 13.07.2016 20:36

Сергей16,
$('#digit01').on('input', function() {
   $('#canvas').width(this.value)
})

Сергей16 13.07.2016 21:06

Спасибо Рони. Все работает.
Я еще сам поразбираюсь, но без твоей помощи было никак.


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