Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Почему-то не могу поменять цвета / 22 сообщений из 22, страница 1 из 1
13.03.2018, 18:50
    #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, 19:00
    #39614333
1024
1024
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Почему-то не могу поменять цвета
beginPath надо перед сменой цвета а не после
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.03.2018, 19:02
    #39614334
Cat2
Cat2
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Почему-то не могу поменять цвета
Cat2синий квадрат
Черный квадрат
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.03.2018, 19:06
    #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:09
    #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:12
    #39614343
1024
1024
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Почему-то не могу поменять цвета
fillStyle а надо strokeStyle
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.03.2018, 19:17
    #39614345
Cat2
Cat2
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Почему-то не могу поменять цвета
1024fillStyle а надо strokeStyle
Прогер_самоучка , 1024
Спасибо, глаз у меня замылился
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.03.2018, 19:19
    #39614346
Cat2
Cat2
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Почему-то не могу поменять цвета
Все хорошо
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.03.2018, 19:29
    #39614353
Прогер_самоучка
Прогер_самоучка
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Почему-то не могу поменять цвета
Cat2Все хорошо

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

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

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

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

Никаких js-модулей подгружать не надо?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.03.2018, 20:44
    #39614386
Cat2
Cat2
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Почему-то не могу поменять цвета
Что лучше растр и вектор?
Самые крутые программы - игрушки, используют растр. В растре больше свободы
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.03.2018, 20:52
    #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:53
    #39614389
SIMPLicity_
SIMPLicity_
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Почему-то не могу поменять цвета
Cat2Что лучше растр и вектор?
Самые крутые программы - игрушки, используют растр. В растре больше свободы
Сила вектора - в масштабируемости без (заметных) искажений пропорций...
PS Но заливка в основном - растровая - так легче. Хотя иногда хрен её (правильно) натянешь на каркас.
PPS Я вообще та могу сильно ошибаться, так как в этом ни херра не шарю :(
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.03.2018, 20:58
    #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, 21:04
    #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:14
    #39614401
Cat2
Cat2
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Почему-то не могу поменять цвета
вадякартинки для демонстрации нагрузки на проц.(по коментам )
Нагрузка на проц производителей игрушек не волнуют.
Игрушки не делают для работы в Хроме. Их делают для работы в ОС, ну кроме браузерных, которые в основном вообще без графики
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.03.2018, 21:22
    #39614404
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Почему-то не могу поменять цвета
Cat2Нагрузка на проц производителей игрушек не волнуют.там этот вопрос поднят из-за того что нефиг для простой вещи как часики на страничке - грузить проц, тормозить работу браузера.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Почему-то не могу поменять цвета / 22 сообщений из 22, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 256ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1444249]:
 0ms
get settings:
 8ms
get forum list:
 11ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 158ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 48ms
get tp. blocked users:
 1ms
others: 11ms
total:  256ms
x
x
Закрыть


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