Форум программистов, компьютерный форум, киберфорум
8Observer8
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  

Вывод текста и геометрических фигур на плоскости с помощью Canvas API и языка TypeScript

Запись от 8Observer8 размещена 26.04.2020 в 17:12
Показов 2225 Комментарии 0
Метки canvas, typescript

Содержание блога

Перевёл один в один SFML C++ пример на Canvas API и TypeScript:
Как собрать из консоли:
  • Заходим в каталог проекта из консоли и вводим команды:
  • npm install
  • http-server
  • В браузере: localhost:8080

Замечание. Должны быть установлены: Node.js, TypeScript и HTTP Server. Установка глобально:
npm typescript http-server -g
Исходники

HTML5
1
<canvas id="renderCanvas" width="280" height="280" style="border: solid black 1px"></canvas>
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
import * as $ from "jquery";
 
$(() =>
{
    let canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
    let ctx = canvas.getContext("2d");
 
    // Red circle
    ctx.fillStyle = "#ff0000";
    ctx.beginPath();
    ctx.arc(50, 150, 20, 0, 2 * Math.PI);
    ctx.fill();
 
    // Green circle
    ctx.fillStyle = "#00ff00";
    ctx.beginPath();
    ctx.arc(150, 150, 30, 0, 2 * Math.PI);
    ctx.fill();
 
    // Blue circle
    ctx.fillStyle = "#0000ff";
    ctx.beginPath();
    ctx.arc(50, 40, 40, 0, 2 * Math.PI);
    ctx.fill();
 
    // Rectangle with a border
    ctx.fillStyle = "yellow";
    ctx.strokeStyle = "magenta";
    ctx.lineWidth = 5;
    ctx.beginPath();
    ctx.rect(50, 40, 200, 50);
    ctx.fill();
    ctx.stroke();
 
    // Text
    ctx.font = "24px Arial";
    ctx.fillStyle = "red";
    ctx.fillText("Начать игру", 80, 70);
});
Изображения
 
Вложения
Тип файла: rar draw-text-canvas2d-ts.rar (9.7 Кб, 1156 просмотров)
Метки canvas, typescript
Размещено в Без категории
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Новые блоги и статьи
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
Фото: Daniel Greenwood
kumehtar 13.11.2025
Расскажи мне о Мире, бродяга
kumehtar 12.11.2025
— Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .
PowerShell Snippets
iNNOKENTIY21 11.11.2025
Модуль PowerShell 5. 1+ : Snippets. psm1 У меня модуль расположен в пользовательской папке модулей, по умолчанию: \Documents\WindowsPowerShell\Modules\Snippets\ А в самом низу файла-профиля. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru