Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Почему-то не могу поменять цвета  [new]
Cat2
Member

Откуда: Petroskoi, Karjala
Сообщений: 145169
Не могу разобраться с применение цвета
Код страницы
<!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>

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

К сообщению приложен файл. Размер - 13Kb
13 мар 18, 18:50    [21253606]     Ответить | Цитировать Сообщить модератору
 Re: Почему-то не могу поменять цвета  [new]
1024
Member

Откуда: Нижний Новгород
Сообщений: 14210
beginPath надо перед сменой цвета а не после
13 мар 18, 19:00    [21253625]     Ответить | Цитировать Сообщить модератору
 Re: Почему-то не могу поменять цвета  [new]
Cat2
Member

Откуда: Petroskoi, Karjala
Сообщений: 145169
Cat2
синий квадрат

Черный квадрат
13 мар 18, 19:02    [21253627]     Ответить | Цитировать Сообщить модератору
 Re: Почему-то не могу поменять цвета  [new]
Прогер_самоучка
Member

Откуда:
Сообщений: 68163
Cat2
Не могу разобраться с применение цвета
Код страницы
<!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>
13 мар 18, 19:06    [21253636]     Ответить | Цитировать Сообщить модератору
 Re: Почему-то не могу поменять цвета  [new]
Прогер_самоучка
Member

Откуда:
Сообщений: 68163
Cat2
Cat2
синий квадрат

Черный квадрат
+
<!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>
13 мар 18, 19:09    [21253643]     Ответить | Цитировать Сообщить модератору
 Re: Почему-то не могу поменять цвета  [new]
Cat2
Member

Откуда: Petroskoi, Karjala
Сообщений: 145169
1024
beginPath надо перед сменой цвета а не после

Поменял для квадрата

                
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();

Толщина линий действительно изменилась

К сообщению приложен файл. Размер - 13Kb
13 мар 18, 19:09    [21253645]     Ответить | Цитировать Сообщить модератору
 Re: Почему-то не могу поменять цвета  [new]
1024
Member

Откуда: Нижний Новгород
Сообщений: 14210
fillStyle а надо strokeStyle
13 мар 18, 19:12    [21253649]     Ответить | Цитировать Сообщить модератору
 Re: Почему-то не могу поменять цвета  [new]
Cat2
Member

Откуда: Petroskoi, Karjala
Сообщений: 145169
1024
fillStyle а надо strokeStyle

Прогер_самоучка , 1024
Спасибо, глаз у меня замылился
13 мар 18, 19:17    [21253653]     Ответить | Цитировать Сообщить модератору
 Re: Почему-то не могу поменять цвета  [new]
Cat2
Member

Откуда: Petroskoi, Karjala
Сообщений: 145169
Все хорошо

К сообщению приложен файл. Размер - 15Kb
13 мар 18, 19:19    [21253656]     Ответить | Цитировать Сообщить модератору
 Re: Почему-то не могу поменять цвета  [new]
Прогер_самоучка
Member

Откуда:
Сообщений: 68163
Cat2
Все хорошо

Картинка с другого сайта.
Вот и славно
13 мар 18, 19:29    [21253665]     Ответить | Цитировать Сообщить модератору
 Re: Почему-то не могу поменять цвета  [new]
Cat2
Member

Откуда: Petroskoi, Karjala
Сообщений: 145169
В продолжение. Где найти спецификацию на графику в HTML5 ?

Искал
По найденным ссылкам народ друг у друга примеры и целые куски текста переписывает, а полного описания всех функций не нашел.
13 мар 18, 19:37    [21253671]     Ответить | Цитировать Сообщить модератору
 Re: Почему-то не могу поменять цвета  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 13833
Cat2,
в сторону svg смотрел?
там намного проще
13 мар 18, 19:56    [21253691]     Ответить | Цитировать Сообщить модератору
 Re: Почему-то не могу поменять цвета  [new]
Cat2
Member

Откуда: Petroskoi, Karjala
Сообщений: 145169
вадя
Cat2,
в сторону svg смотрел?
там намного проще

Вообще-то я только сегодня утром решил разобраться с графикой в HTML, но прочел и про растр и про svg.

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

Поэтому не думаю, что это проще.
Поживем - увидим.
13 мар 18, 20:27    [21253720]     Ответить | Цитировать Сообщить модератору
 Re: Почему-то не могу поменять цвета  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 13833
Cat2,
svg - векторная графика.
пробовал канвас, и svg. моё мнение - svg проще.
https://svg-art.ru/
https://developer.mozilla.org/ru/docs/Web/SVG
13 мар 18, 20:32    [21253724]     Ответить | Цитировать Сообщить модератору
 Re: Почему-то не могу поменять цвета  [new]
Cat2
Member

Откуда: Petroskoi, Karjala
Сообщений: 145169
вадя,

Никаких js-модулей подгружать не надо?
13 мар 18, 20:38    [21253727]     Ответить | Цитировать Сообщить модератору
 Re: Почему-то не могу поменять цвета  [new]
Cat2
Member

Откуда: Petroskoi, Karjala
Сообщений: 145169
Что лучше растр и вектор?
Самые крутые программы - игрушки, используют растр. В растре больше свободы
13 мар 18, 20:44    [21253735]     Ответить | Цитировать Сообщить модератору
 Re: Почему-то не могу поменять цвета  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 13833
Cat2
вадя,

Никаких js-модулей подгружать не надо?
нет
я делал элемент
 <svg id="svg1">
  </svg>
и в него таким кодом вставлял
 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 таблицу, селект, или ещё какой элемент.
13 мар 18, 20:52    [21253746]     Ответить | Цитировать Сообщить модератору
 Re: Почему-то не могу поменять цвета  [new]
SIMPLicity_
Member

Откуда: (((@)))
Сообщений: 8306
Cat2
Что лучше растр и вектор?
Самые крутые программы - игрушки, используют растр. В растре больше свободы

Сила вектора - в масштабируемости без (заметных) искажений пропорций...
PS Но заливка в основном - растровая - так легче. Хотя иногда хрен её (правильно) натянешь на каркас.
PPS Я вообще та могу сильно ошибаться, так как в этом ни херра не шарю :(
13 мар 18, 20:53    [21253748]     Ответить | Цитировать Сообщить модератору
 Re: Почему-то не могу поменять цвета  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 13833
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/
картинки для демонстрации нагрузки на проц.(по коментам )
но это не суть - посмотри лучше в хроме как они реализованы - всё просто
13 мар 18, 20:58    [21253758]     Ответить | Цитировать Сообщить модератору
 Re: Почему-то не могу поменять цвета  [new]
Cat2
Member

Откуда: Petroskoi, Karjala
Сообщений: 145169
Наступил сегодня на трое граблей, которые не нашел или нашел в интернете.
1. Оказывается, что в размерах canvas не рулят css-стили. С этим сам разобрался,
var canvas = document.getElementById(id);
var h = canvas.clientHeight 
var w = canvas.clientWidth  
canvas.setAttribute("width", w)
canvas.setAttribute("height", h)

2. Оказывается
1024
beginPath надо перед сменой стиля линии, а не после

Нигде этого не было написано. В известных мне языках программирование стиль объявляется ДО начала рисования и может изменятся в процессе рисования.
13 мар 18, 21:04    [21253769]     Ответить | Цитировать Сообщить модератору
 Re: Почему-то не могу поменять цвета  [new]
Cat2
Member

Откуда: Petroskoi, Karjala
Сообщений: 145169
вадя
картинки для демонстрации нагрузки на проц.(по коментам )

Нагрузка на проц производителей игрушек не волнуют.
Игрушки не делают для работы в Хроме. Их делают для работы в ОС, ну кроме браузерных, которые в основном вообще без графики
13 мар 18, 21:14    [21253789]     Ответить | Цитировать Сообщить модератору
 Re: Почему-то не могу поменять цвета  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 13833
Cat2
Нагрузка на проц производителей игрушек не волнуют.
там этот вопрос поднят из-за того что нефиг для простой вещи как часики на страничке - грузить проц, тормозить работу браузера.
13 мар 18, 21:22    [21253800]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить