ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Почему-то не могу поменять цвета
22 сообщений из 22, страница 1 из 1
Почему-то не могу поменять цвета
    #39614325
Фотография Cat2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cat2
Участник
Не могу разобраться с применение цвета
Код страницы
Код: 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.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div style="width:400px">
        <canvas id="Canvas" style="margin:0px; height:200px;
                width:100%;border:1px solid blue"></canvas>
        <script>
            function draw(id) {
                var canvas = document.getElementById(id);
                var h = canvas.clientHeight 
                var w = canvas.clientWidth  
                canvas.setAttribute("width", w)
                canvas.setAttribute("height", h)
                var context = canvas.getContext("2d");

                context.lineWidth = 1;

                context.strokeStyle = "red";
                context.beginPath();
                context.moveTo(0, 0);
                context.lineTo(w, h);
                context.stroke();

                context.lineWidth = 2;
                context.fillStyle = "green";
                context.beginPath();
                context.arc(w / 2, h / 2, h / 2, 0, 2 * Math.PI, false);
                context.stroke();
                context.lineWidth = 3;
                var k = 50
                context.fillStyle = "black";
                context.beginPath();
                context.rect(w / 2 - k, h / 2 - k, k * 2, k * 2);
                context.stroke();
                return
            }
            draw("Canvas")
        </script>
    </div>
</body>
</html>


Ожидаю красную линию, зеленую окружность и синий квадрат с разной толщиной линий, а получаю все красное одной толщины
...
Рейтинг: 0 / 0
13.03.2018, 18:50
| Ответить | Цитировать | Написать  
Почему-то не могу поменять цвета
    #39614333
Фотография 1024
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
1024
Участник
beginPath надо перед сменой цвета а не после
...
Рейтинг: 0 / 0
13.03.2018, 19:00
| Ответить | Цитировать | Написать  
Почему-то не могу поменять цвета
    #39614334
Фотография Cat2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cat2
Участник
Cat2синий квадрат
Черный квадрат
...
Рейтинг: 0 / 0
13.03.2018, 19:02
| Ответить | Цитировать | Написать  
Почему-то не могу поменять цвета
    #39614339
Прогер_самоучка
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прогер_самоучка
Участник
Cat2Не могу разобраться с применение цвета
Код страницы
Код: 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.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div style="width:400px">
        <canvas id="Canvas" style="margin:0px; height:200px;
                width:100%;border:1px solid blue"></canvas>
        <script>
            function draw(id) {
                var canvas = document.getElementById(id);
                var h = canvas.clientHeight 
                var w = canvas.clientWidth  
                canvas.setAttribute("width", w)
                canvas.setAttribute("height", h)
                var context = canvas.getContext("2d");

                context.lineWidth = 1;

                context.strokeStyle = "red";
                context.beginPath();
                context.moveTo(0, 0);
                context.lineTo(w, h);
                context.stroke();

                context.lineWidth = 2;
                context.fillStyle = "green";
                context.beginPath();
                context.arc(w / 2, h / 2, h / 2, 0, 2 * Math.PI, false);
                context.stroke();
                context.lineWidth = 3;
                var k = 50
                context.fillStyle = "black";
                context.beginPath();
                context.rect(w / 2 - k, h / 2 - k, k * 2, k * 2);
                context.stroke();
                return
            }
            draw("Canvas")
        </script>
    </div>
</body>
</html>



Ожидаю красную линию, зеленую окружность и синий квадрат с разной толщиной линий, а получаю все красное одной толщины


 
так?<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="width:400px">
<canvas id="Canvas" style="margin:0px; height:200px;
width:100%;border:1px solid blue"></canvas>
<script>
function draw(id) {
var canvas = document.getElementById(id);
var h = canvas.clientHeight
var w = canvas.clientWidth
canvas.setAttribute("width", w)
canvas.setAttribute("height", h)
var context = canvas.getContext("2d");

context.lineWidth = 1;

context.strokeStyle = "red";
context.beginPath();
context.moveTo(0, 0);
context.lineTo(w, h);
context.stroke();

context.lineWidth = 2;
context.strokeStyle = "green";
context.beginPath();
context.arc(w / 2, h / 2, h / 2, 0, 2 * Math.PI, false);
context.stroke();
context.lineWidth = 3;
var k = 50
context.strokeStyle = "blue";
context.beginPath();
context.rect(w / 2 - k, h / 2 - k, k * 2, k * 2);
context.stroke();
return
}
draw("Canvas")
</script>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
13.03.2018, 19:06
| Ответить | Цитировать | Написать  
Почему-то не могу поменять цвета
    #39614340
Прогер_самоучка
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прогер_самоучка
Участник
Cat2Cat2синий квадрат
Черный квадрат
 
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="width:400px">
<canvas id="Canvas" style="margin:0px; height:200px;
width:100%;border:1px solid blue"></canvas>
<script>
function draw(id) {
var canvas = document.getElementById(id);
var h = canvas.clientHeight
var w = canvas.clientWidth
canvas.setAttribute("width", w)
canvas.setAttribute("height", h)
var context = canvas.getContext("2d");

context.lineWidth = 1;

context.strokeStyle = "red";
context.beginPath();
context.moveTo(0, 0);
context.lineTo(w, h);
context.stroke();

context.lineWidth = 2;
context.strokeStyle = "green";
context.beginPath();
context.arc(w / 2, h / 2, h / 2, 0, 2 * Math.PI, false);
context.stroke();
context.lineWidth = 3;
var k = 50
context.strokeStyle = "black";
context.beginPath();
context.rect(w / 2 - k, h / 2 - k, k * 2, k * 2);
context.stroke();
return
}
draw("Canvas")
</script>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
13.03.2018, 19:09
| Ответить | Цитировать | Написать  
Почему-то не могу поменять цвета
    #39614341
Фотография Cat2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cat2
Участник
1024beginPath надо перед сменой цвета а не после
Поменял для квадрата

Код: sql
1.
2.
3.
4.
5.
6.
7.
                
var k = 50
context.beginPath();
context.fillStyle = "black";
context.lineWidth = 3;
context.rect(w / 2 - k, h / 2 - k, k * 2, k * 2);
context.stroke();


Толщина линий действительно изменилась
...
Рейтинг: 0 / 0
13.03.2018, 19:09
| Ответить | Цитировать | Написать  
Почему-то не могу поменять цвета
    #39614343
Фотография 1024
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
1024
Участник
fillStyle а надо strokeStyle
...
Рейтинг: 0 / 0
13.03.2018, 19:12
| Ответить | Цитировать | Написать  
Почему-то не могу поменять цвета
    #39614345
Фотография Cat2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cat2
Участник
1024fillStyle а надо strokeStyle
Прогер_самоучка , 1024
Спасибо, глаз у меня замылился
...
Рейтинг: 0 / 0
13.03.2018, 19:17
| Ответить | Цитировать | Написать  
Почему-то не могу поменять цвета
    #39614346
Фотография Cat2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cat2
Участник
Все хорошо
...
Рейтинг: 0 / 0
13.03.2018, 19:19
| Ответить | Цитировать | Написать  
Почему-то не могу поменять цвета
    #39614353
Прогер_самоучка
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прогер_самоучка
Участник
Cat2Все хорошо

Вот и славно
...
Рейтинг: 0 / 0
13.03.2018, 19:29
| Ответить | Цитировать | Написать  
Почему-то не могу поменять цвета
    #39614355
Фотография Cat2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cat2
Участник
В продолжение. Где найти спецификацию на графику в HTML5 ?

Искал
По найденным ссылкам народ друг у друга примеры и целые куски текста переписывает, а полного описания всех функций не нашел.
...
Рейтинг: 0 / 0
13.03.2018, 19:37
| Ответить | Цитировать | Написать  
Почему-то не могу поменять цвета
    #39614362
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Cat2,
в сторону svg смотрел?
там намного проще
...
Рейтинг: 0 / 0
13.03.2018, 19:56
| Ответить | Цитировать | Написать  
Почему-то не могу поменять цвета
    #39614374
Фотография Cat2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cat2
Участник
вадяCat2,
в сторону svg смотрел?
там намного проще
Вообще-то я только сегодня утром решил разобраться с графикой в HTML, но прочел и про растр и про svg.

Не обнаружил существенной разницы между ними при работе с примитивами. SVG, как я понял, что то вроде WPF, и его сила в анимации и в наличии такой сильной штуки, как Path (путь фигуры).

Поэтому не думаю, что это проще.
Поживем - увидим.
...
Рейтинг: 0 / 0
13.03.2018, 20:27
| Ответить | Цитировать | Написать  
Почему-то не могу поменять цвета
    #39614376
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Cat2,
svg - векторная графика.
пробовал канвас, и svg. моё мнение - svg проще.
https://svg-art.ru/
https://developer.mozilla.org/ru/docs/Web/SVG
...
Рейтинг: 0 / 0
13.03.2018, 20:32
| Ответить | Цитировать | Написать  
Почему-то не могу поменять цвета
    #39614379
Фотография Cat2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cat2
Участник
вадя,

Никаких js-модулей подгружать не надо?
...
Рейтинг: 0 / 0
13.03.2018, 20:38
| Ответить | Цитировать | Написать  
Почему-то не могу поменять цвета
    #39614386
Фотография Cat2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cat2
Участник
Что лучше растр и вектор?
Самые крутые программы - игрушки, используют растр. В растре больше свободы
...
Рейтинг: 0 / 0
13.03.2018, 20:44
| Ответить | Цитировать | Написать  
Почему-то не могу поменять цвета
    #39614388
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Cat2вадя,

Никаких js-модулей подгружать не надо?нет
я делал элемент
Код: html
1.
2.
 <svg id="svg1">
  </svg>

и в него таким кодом вставлял
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
 var stc = '<g  class="xAxis">';

                for (let i = 0; i <= n; i++) {

                    stc += '<g transform="translate(' + (m * i) + ',0)">'
                            + '<line class="mark" y2="-6" x2="0"></line>'
                            + '<text dy="0em" y="-9" x="0"  style="text-anchor: middle;">' + (8 + i) + ':00</text>'
                            + '</g>';
                }
                stc += '</g>';
                svg.innerHTML = '<g transform="translate(100,20)">' + s + stc + '</g>';


это мне надо было строить динамически
но никто не мешает это вставить вручную
в редакторе.
фактически получается как написать в html таблицу, селект, или ещё какой элемент.
...
Рейтинг: 0 / 0
13.03.2018, 20:52
| Ответить | Цитировать | Написать  
Почему-то не могу поменять цвета
    #39614389
Фотография SIMPLicity_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SIMPLicity_
Участник
Cat2Что лучше растр и вектор?
Самые крутые программы - игрушки, используют растр. В растре больше свободы
Сила вектора - в масштабируемости без (заметных) искажений пропорций...
PS Но заливка в основном - растровая - так легче. Хотя иногда хрен её (правильно) натянешь на каркас.
PPS Я вообще та могу сильно ошибаться, так как в этом ни херра не шарю :(
...
Рейтинг: 0 / 0
13.03.2018, 20:53
| Ответить | Цитировать | Написать  
Почему-то не могу поменять цвета
    #39614393
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Cat2Самые крутые программы - игрушки, используют растр. В растре больше свободывопрос спорный.
вот варианты
https://cdn.rawgit.com/ivan386/e488f9a09d1605c011469bb9d9fdaf7e/raw/20c0a8b612008bf5767564c16457fb8f681cabb4/stopwatch.svg
https://hsto.org/getpro/habr/comment_images/027/ea2/357/027ea235753062811f9697dbd7a968a7.svg
взяты тут https://habrahabr.ru/post/350596/
картинки для демонстрации нагрузки на проц.(по коментам )
но это не суть - посмотри лучше в хроме как они реализованы - всё просто
...
Рейтинг: 0 / 0
13.03.2018, 20:58
| Ответить | Цитировать | Написать  
Почему-то не могу поменять цвета
    #39614397
Фотография Cat2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cat2
Участник
Наступил сегодня на трое граблей, которые не нашел или нашел в интернете.
1. Оказывается, что в размерах canvas не рулят css-стили. С этим сам разобрался,
Код: sql
1.
2.
3.
4.
5.
var canvas = document.getElementById(id);
var h = canvas.clientHeight 
var w = canvas.clientWidth  
canvas.setAttribute("width", w)
canvas.setAttribute("height", h)


2. Оказывается
1024beginPath надо перед сменой стиля линии, а не после
Нигде этого не было написано. В известных мне языках программирование стиль объявляется ДО начала рисования и может изменятся в процессе рисования.
...
Рейтинг: 0 / 0
13.03.2018, 21:04
| Ответить | Цитировать | Написать  
Почему-то не могу поменять цвета
    #39614401
Фотография Cat2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cat2
Участник
вадякартинки для демонстрации нагрузки на проц.(по коментам )
Нагрузка на проц производителей игрушек не волнуют.
Игрушки не делают для работы в Хроме. Их делают для работы в ОС, ну кроме браузерных, которые в основном вообще без графики
...
Рейтинг: 0 / 0
13.03.2018, 21:14
| Ответить | Цитировать | Написать  
Почему-то не могу поменять цвета
    #39614404
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Cat2Нагрузка на проц производителей игрушек не волнуют.там этот вопрос поднят из-за того что нефиг для простой вещи как часики на страничке - грузить проц, тормозить работу браузера.
...
Рейтинг: 0 / 0
13.03.2018, 21:22
| Ответить | Цитировать | Написать  
22 сообщений из 22, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Почему-то не могу поменять цвета
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/search_topic.php?author=PaPashaD&author_mode=last_posts&do_search=1]:
 0ms
get settings:
 9ms
get forum list:
 12ms
get settings:
 10ms
get forum list:
 12ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 70ms
get topic data:
 13ms
get forum data:
 3ms
get page messages:
 52ms
get tp. blocked users:
 1ms
others: 442ms
total:  632ms
созд. / загр.: 632ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]