Canvas, взаимодействие с javascript?

Question

В рамках курса в школе мы учимся работать с элементом Canvas HTML5, это также означает, что мы учимся работать с Javascript. Назначение - создать что-то графическое и какое-то взаимодействие с этим графическим.

Я решил создать несколько простых диаграмм и дать пользователю возможность вводить значения и видеть, как изменяются диаграммы.

http://people.dsv.su.se/~tojo0551/graf/lines.html содержит несколько диаграмм, которые я составил, теперь идет сложная часть работы с Javascript и создание взаимодействия. Это, вероятно, легко, но я никогда не касался Javascript в стороне от JQuery, прежде чем немного потерял.

Скажите, что я хочу, чтобы пользователь мог взаимодействовать с диаграммой диаграммы внизу и заполнить значение между 1-5 и соответствующим образом увеличивать полосу.

код Canvas прост, он выглядит следующим образом:

function bars(){ 

var canvas = document.getElementById("bars"); 
if (canvas.getContext) 
{ 

var ctx = canvas.getContext("2d"); 

var bar1 = canvas.getContext("2d"); 
bar1.fillStyle = "rgba(0, 50, 0, .2)"; 
bar1.fillRect(20, 400, 30, 90); 

var bar2 = canvas.getContext("2d"); 
bar2.fillStyle = "rgba(0, 50, 0, .4)"; 
bar2.fillRect(55, 360, 30, 130); 

ctx.fillStyle = "rgba(0, 50, 0, .2)"; 
ctx.fillRect(90, 260, 30, 230); 

ctx.fillStyle = "rgba(0, 50, 0, .4)"; 
ctx.fillRect(125, 290, 30, 200); 

ctx.fillStyle = "rgba(0, 50, 0, .2)"; 
ctx.fillRect(160, 270, 30, 220); 

ctx.fillStyle = "rgba(0, 50, 0, .4)"; 
ctx.fillRect(195, 250, 30, 240); 

ctx.fillStyle = "rgba(0, 50, 0, .2)"; 
ctx.fillRect(230, 300, 30, 190); 

ctx.fillStyle = "rgba(0, 50, 0, .2)"; 
ctx.fillRect(20, 400, 30, 90); 

ctx.fillStyle = "rgba(0, 50, 0, .4)"; 
ctx.fillRect(55, 360, 30, 130); 

ctx.fillStyle = "rgba(0, 50, 0, .2)"; 
ctx.fillRect(90, 260, 30, 230); 

ctx.fillStyle = "rgba(0, 50, 0, .4)"; 
ctx.fillRect(125, 290, 30, 200); 

ctx.fillStyle = "rgba(0, 50, 0, .2)"; 
ctx.fillRect(160, 270, 30, 220); 

ctx.fillStyle = "rgba(0, 50, 0, .4)"; 
ctx.fillRect(195, 250, 30, 240); 

ctx.fillStyle = "rgba(0, 50, 0, .2)"; 
ctx.fillRect(230, 300, 30, 190); 

Но куда мне отсюда идти? Я новичок в программировании, я знаю, как создавать функции и управлять потоком с помощью выбора и циклов, вы знаете, я начинающий программист. Каков естественный путь для создания пользовательского контроля? Я хочу внести свой вклад, прежде чем начать работать, поэтому я не работаю в неправильном направлении. Любые страницы, которые имеют хорошие советы о том, как и какие идеи вы получили, очень приветствуются. /Tomas

Answer 1

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

Предполагая, что вы используете jQuery, вам просто нужно вызвать функцию bars(), когда пользователь изменяет значение на входе html. Сначала просто измените объявление bars(), чтобы его можно было вызвать со значением. Например:

function bars(userVal) { 
    // All your existing code ... 
} 

Тогда вам нужно будет очистить все, что было нарисовано в последний раз, когда вызывается бары(). Нечто подобное:

function bars(userVal) { 
    var canvas = document.getElementById("bars"); 
    if (canvas.getContext) { 
     var ctx = canvas.getContext("2d"); 
     // Clear the bars that were drawn last time 
     ctx.clearRect(x,y,w,h); 
     // The rest of your existing code ... 
    } 
} 

clearRect принимает местоположение начала координат (х и у) и высоту и ширину (Ш и), и очистить холст в этой области. Итак, перейдите в необходимые пределы области рисования.

Следующая добавить ввод текста на странице, и использовать JQuery для вызова бруски() всякий раз, когда он изменился

$(document).ready(function() { 
    $("input").on("change", function() { 
     var value = $(this).val(); 
     bars(value); 
    }); 
}); 

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

Примеры:

// This would change the start position of a bar 
ctx.fillRect(userVal, 260, 30, 230); 
// This would change the width of a bar 
ctx.fillRect(90, 260, userVal, 230); 
// This would change the colour of a bar 
ctx.fillStyle = "rgba(userVal, 50, 0, .4)"; 

удовольствие.

Answer 2

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

Если ваш сайт больше интересует вас, вы должны взглянуть на flot.

Тогда для приключений среди нас есть three, который отображает 3d. Хотя вы должны позаботиться об этом.