Написание текста используя canvas HTML5

@And82 · Регистрация: 15.01.2016

Студворк — интернет-сервис помощи студентам

необходимо Написать две буквы "VA", но без помощи

HTML5
1
filltext

есть у кого какие идеи?

@Freeze_Breeze · 22.11.2017, 16:11

And82, чего????

@And82 · 24.11.2017, 15:27 **[ТС]**

Freeze_Breeze,
Необходимо нарисовать две букы V A
мне удалось нарыть код для V. Как рисовать А? подбором? без использования filltext.

HTML5
1
2
3
4
5
<body>
    <h3>Canvas: Инициалы</h3>
     <canvas id="my_canvas" width="350" height="350">
     </canvas>
  </body>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
window.onload = draw;
    function draw() {
     var canvas = document.getElementById('my_canvas');
     if (canvas.getContext){
        var context = canvas.getContext('2d');
                        context.strokeStyle = "rgba(0,220,0, 1)";
            context.lineWidth = 3;
                       context.beginPath();
                       context.lineTo(50, 220);
                       context.lineTo(80, 250 );
                       context.lineTo(110, 220 );
               context.stroke();
                       context.closePath();
 }
}

@shvyrevvg · 24.11.2017, 15:40

Сообщение от And82

мне удалось нарыть код для V. Как рисовать А?

Ну, а как Вы на бумаге по клеточкам будете рисовать букву A?

@And82 · 24.11.2017, 15:47 **[ТС]**

Сообщение от shvyrevvg

Ну, а как Вы на бумаге по клеточкам будете рисовать букву A?

не понял вопроса. Это с намеком, что невозможно?

@Freeze_Breeze · 24.11.2017, 16:15

And82, V это перевернутая A, только с палкой по средине. напишите код задом на перед и добавьте прямую линию и все.

@And82 · 24.11.2017, 16:17 **[ТС]**

Сообщение от Freeze_Breeze

And82, V это перевернутая A, только с палкой по средине. напишите код задом на перед и добавьте прямую линию и все.

были в голове такие мысли. Но можно ли как то логику найти, как рисовать. Цифры это точка координат на экране? А если я хочу другие буквы нарисовать?

и как пробел поставить между буквами?

@shvyrevvg · 24.11.2017, 16:38

And82, у вас есть лист с клетками - это канва с координатами, отсчет верхний левый угол.

@And82 · 24.11.2017, 17:14 **[ТС]**

господи... нафига этот канвас придумали? НЕ проще ли в фотошопе всё нужное отрисовать и вставить как картинку?

конечный вариант выглядит так:

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
window.onload = draw;
    function draw()
    {
        var canvas = document.getElementById('my_canvas');
        if (canvas.getContext){
            var context = canvas.getContext('2d');
 
            context.strokeStyle = "rgba(0,120,10, 1)";
            context.lineWidth = 3;
            context.beginPath();
            context.moveTo(20, 20);
            context.lineTo(50, 100);
            context.lineTo(85, 20);
            context.stroke();
            context.closePath();
 
            context.beginPath();
            context.moveTo(100, 105);
            context.lineTo(135, 20);
            context.lineTo(175, 120);
            context.stroke();
            context.closePath();
 
            context.beginPath();
            context.moveTo(113, 75);
            context.lineTo(158, 75);
            context.stroke();
            context.closePath();
        }
    }

тупо цифры подбирал

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	22.11.2017, 16:11
	And82, чего???? 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	24.11.2017, 16:15
	And82, V это перевернутая A, только с палкой по средине. напишите код задом на перед и добавьте прямую линию и все. 0

@shvyrevvg 1786 / 1036 / 445 Регистрация: 12.05.2016 Сообщений: 2,550
	24.11.2017, 16:38
	And82, у вас есть лист с клетками - это канва с координатами, отсчет верхний левый угол. 0