1 / 1 / 0
Регистрация: 03.06.2014
Сообщений: 32
1

Выбор цвета для заливки canvas

25.02.2017, 15:12. Показов 6759. Ответов 2

Студворк — интернет-сервис помощи студентам
Добрый день!
Подскажите, пожалуйста, где ошибка в коде? Или такое нельзя сделать? Есть какой-нибудь объект и его необходимо закрасить по желанию пользователя.
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<form>
   <p>Укажите цвет фона: <input type="color" id="color" value="#ff0000">
   <button OnClick="colorr()">Цвет</button>
</form>
<script>
function colorr() {
    var color = document.getElementById("color").value;
    
}
 
   window.onload = function() {
       var canvas = document.getElementById("drawingCanvas");
       var context = canvas.getContext("2d");   
        
        context.translate(50,50);
        context.moveTo(110,50);
        context.lineTo(110,10);
        context.lineTo(125,35);
        context.closePath();
 
        // Заливка
        context.fillStyle = color;
        context.fill();
 
        // Контур
        context.lineWidth = 3;
        context.strokeStyle = "black";
        context.stroke();
    }
</script>
</head>
<body>
   <canvas id="drawingCanvas" width="1000" height="500"></canvas>
</body>
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
25.02.2017, 15:12
Ответы с готовыми решениями:

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

Изобразить 5 различных геометрических фигур используя различные цвета для заливки и обводки
Изобразить 5 различных геометрических фигур используя различные цвета для заливки и обводки....

Выбор термоклея для заливки
У щупа мультиметра оторвался проводок. Припаял обратно, но циллиндрический кусок пластмассы вокруг...

Инвертация цвета TColor для Form.Canvas
Как инвертировать цвет для канвы формы? Я сделал вот так, но что-то мне не нравиться полученый...

2
413 / 378 / 220
Регистрация: 18.07.2014
Сообщений: 1,259
25.02.2017, 16:57 2
Лучший ответ Сообщение было отмечено Bert как решение

Решение

context.fillStyle = color;
context.fill();

Добавлено через 13 минут
Bert, sry, криво скопировал
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
window.addEventListener('load', function windowLoad() {
    var canvas = document.getElementById("drawingCanvas");
    var context = canvas.getContext("2d");   
    context.translate(50,50);
    context.moveTo(110,50);
    context.lineTo(110,10);
    context.lineTo(125,35);
    context.closePath();
 
    // Заливка
    context.fillStyle = '#ff0000';
    context.fill();
 
    // Контур
    context.lineWidth = 3;
    context.strokeStyle = "black";
    context.stroke();
    
    document.forms['color'].addEventListener('submit', function formChange(e) {
        e.preventDefault();
      context.fillStyle = document.getElementById("color").value;
      context.fill();
    });
})
HTML5
1
2
3
4
5
<form name="color">
   <p>Укажите цвет фона: <input type="color" id="color" value="#ff0000">
   <button>Цвет</button>
</form>
<canvas id="drawingCanvas" width="1000" height="500"></canvas>
Добавлено через 3 минуты
Bert, ваши ошибки
1 form находится в head. так нельзя, весь видимый html код должен быть в body
2 в функции colorr вы записываете цвет в локальную переменную color, она не будет доступна в window.onload
3 от того что вы измените значение цвета в переменной color, канвас не перекраситься
нужно указать стиль заливки -fillStyle
и сделать заливку -fill
1
1 / 1 / 0
Регистрация: 03.06.2014
Сообщений: 32
25.02.2017, 17:39  [ТС] 3
whiteapps, большое Вам спасибо!
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
25.02.2017, 17:39
Помогаю со студенческими работами здесь

Нужен список стилей заливки canvas, в интернете не нашел
Здравствуйте, мне нужен полный список стилей заливки при рисовании с помощью canvas'a, с десяти...

Изменение цвета заливки в отчете
Здравствуйте! Подскажите пожалуйста, как сделать, чтобы в отчете при выполнении одного условия...

Не сохраняется изменение цвета заливки ячеек
Здравствуйте. Подскажите пожалуйста, заранее очень всем благодарен, кто меня подтолкнёт к...

Изменение заливки и цвета шрифта с привязой к календарю
Доброе время суток! Не могу вспомнить как делается.. При выпадание выходного дня ячейка...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2023, CyberForum.ru