Как изменить параметры lineTo?

296

15 декабря 2016, 16:21

Как мне изменить параметры .lineTo() у canvas по клику?

var ctx = document.getElementById("game").getContext('2d'); 
var button = document.getElementById('myBut'); 
ctx.moveTo(0, 0); 
ctx.lineTo(30, 15); 
ctx.stroke(); 
 
button.onclick = function() { 
  ctx.lineTo(50, 90); 
};

<canvas id="game" style="background:relative; height:100px; width:400px; border: 1px solid red"></canvas> 
<input id="myBut" type="button" value="yeah" />

Answer 1

Если вы хотите дорисовать что-то по клику, то вы все сделали правильно, только забыли закрасить новую линию:

button.onclick = function() {
  ctx.lineTo(50, 90);
  ctx.stroke(); //< --- вот это я добавил
};

var ctx = document.getElementById("game").getContext('2d'); 
var button = document.getElementById('myBut'); 
ctx.moveTo(0, 0); 
ctx.lineTo(30, 15); 
ctx.stroke(); 
 
button.onclick = function() { 
  ctx.lineTo(50, 90); 
  ctx.stroke(); 
};

<canvas id="game" style="background:relative; height:100px; width:400px; border: 1px solid red"></canvas> 
<input id="myBut" type="button" value="yeah" />

Если же вы хотите, чтобы уже нарисованная линия по клику куда-то подвинулась, этого не произойдет. Вам придется весь канвас стереть и заново нарисовать, с уже новым положением линии.

.lineTo и любые другие методы рисования на canvas совершенно неинтерактивны. Канвас работает по принципу фломастера и белой доски: можно что-то нарисовать, можно что-то стереть, но нельзя что-то выделить и повернуть.

Для решения этой проблемы существует библиотека FabricJS, которая привносит объектный слой в канвас и позволяет манипулировать отдельными объектами - линиями, например. Вот официальный гайд на русском: http://fabricjs.com/fabric-intro-part-1_ru/