Приложение для рисования на холсте HTM5: как выбрать цвет?

Question

Приложение для рисования на холсте HTM5: как выбрать цвет?

1

Я создаю это приложение для рисования с помощью HTML5 и Javascript.

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

Здесь мой текущий JS:

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var radius = 10;
var dragging = false;

context.lineWidth = radius * 2;

var putPoint = function(e){
    if(dragging){
      context.lineTo(e.offsetX, e.offsetY);
      context.stroke();
      context.beginPath();
      context.arc(e.offsetX, e.offsetY, radius, 0, Math.PI*2);
      context.fill();
      context.beginPath();
      context.moveTo(e.offsetX, e.offsetY);
    }
}

var engage = function(e){
    dragging = true;
    putPoint(e);
}

var disengage = function(){
    dragging = false;
}


canvas.addEventListener('mousedown', engage);
canvas.addEventListener('mousemove', putPoint);
canvas.addEventListener('mouseup', disengage);

/////////////////////

Здесь ссылка на codepen, чтобы получить четкое представление о том, где я нахожусь:

https://codepen.io/teenicarus/pen/oGVwdB

Как сделать возможным щелкнуть по разным div, чтобы я мог использовать их цвет?

Я ценю все ответы.

Thierry Diallo 20 окт. 2017, в 14:10

Источник

1

Какой у тебя актуальный вопрос? Как связать обработчик кликов? Как установить цвет на холсте?
Evan Knowles 20 окт. 2017, в 11:42
0

@EvanKnowles да, как установить цвет на холсте. Например: когда я нажимаю на красный, красный цвет появляется на холсте
Thierry Diallo 20 окт. 2017, в 11:43
0

Вы можете изменить цвет холста, установив его fillStyle и strokeStyle .
Evan Knowles 20 окт. 2017, в 11:44

Показать ещё 1 комментарий

Теги:

javascript

html5

canvas

2 ответа

0

Возможно, вы захотите использовать цветной ввод. Это решение дает вам ВСЕ цвета.

Добавьте этот элемент ввода в свой HTML файл:

<input type="color" class="color" />

Теперь пользователь сможет выбрать цвет.

Затем задайте элемент ввода или его класс, чтобы получить значение (выбор пользователя). Вы можете использовать функцию:

function getColor() {
    return document.querySelector(".color").value;
}

Наконец, установите strokeStyle для вызова getColor():

context.strokeStyle = getColor();

В качестве альтернативы, сохраните входное значение в переменной (назовите ее color или userColor) и установите для параметра strokeStyle значение этой переменной.

Надеюсь, это поможет.

Посетите мою CodePen, чтобы увидеть это в действии.

strayblues 04 дек. 2018, в 16:39

Ещё вопросы

Какой у тебя актуальный вопрос? Как связать обработчик кликов? Как установить цвет на холсте?
@EvanKnowles да, как установить цвет на холсте. Например: когда я нажимаю на красный, красный цвет появляется на холсте
Вы можете изменить цвет холста, установив его fillStyle и strokeStyle .

Nick Parsons · Accepted Answer · 2017-10-20T09-25-00.000Z

Первое, что вам нужно сделать, это создать цветную переменную в верхней части кода, чтобы сохранить значение текущего цвета, используемого пользователем:

var color = "black"; // Initial, default color

Теперь вам нужно получить все ваши цветовые элементы html и применить eventListener click к каждому из объектов DOM (html-элемент). Чтобы получить все цветовые элементы, вы можете сделать это:

var colors = document.getElementsByClassName("color");

Затем вы можете прокручивать каждый из ваших цветовых элементов и добавлять к нему прослушиватель событий клика, делая это:

for (var i = 0; i < colors.length; i++) {
    colors[i].addEventListener('click', changeColor, false); // Adds the click event listener to each color element
}

В приведенном выше коде говорится, что после нажатия на элемент цвета он вызывает функцию changeColor. Таким образом, мы можем написать функцию, которая получает цвет элемента, который мы нажали, и изменить значение color на цвет, на который мы нажали (цвет, определяемый атрибутом data-color элементов

var changeColor = function(e) {
  color = this.getAttribute("data-color"); // Change the color to what is defined in "data-color"
}

Теперь, каждый раз, когда вы нажимаете на элементы цвета html, changeColor функция changeColor и, таким образом, меняет значение color на значение, определенное вами в data-color для этого конкретного элемента.

Теперь все, что вам нужно сделать, это применить цвет к вашему методу рисования (в вашей функции putPoint), чтобы он показывался на холсте. Вы можете сделать это, используя:

context.strokeStyle = color;
context.fillStyle = color;

Это изменит цвет хода и цвет внутри/заливка.

Рабочий пример можно найти здесь: https://codepen.io/clapynick/pen/pWYrPj?editors=1010