Последние записи
- Удаление папки с файлами
- Распечатка файла
- Преобразовать массив байт в вещественное число (single)
- TChromium (CEF3), сохранение изображений
- Как в Delphi XE обнулить таймер?
- Изменить цвет шрифта TextBox на форме
- Ресайз PNG без потери прозрачности
- Вывод на печать графического файла
- Взаимодействие через командную строку
- Перенести программу из Delphi в Lazarus
Интенсив по Python: Работа с API и фреймворками 24-26 ИЮНЯ 2022. Знаете Python, но хотите расширить свои навыки?
Slurm подготовили для вас особенный продукт! Оставить заявку по ссылке - https://slurm.club/3MeqNEk
Online-курс Java с оплатой после трудоустройства. Каждый выпускник получает предложение о работе
И зарплату на 30% выше ожидаемой, подробнее на сайте академии, ссылка - ttps://clck.ru/fCrQw
28th
Ноя
Работа с Canvas HTML5 (примеры)
Posted by maloy under HTML, Исходники
Arigato
HTML5 и элемент <canvas> поддерживается большинством современных браузеров. Для работы скриптов рисования в браузерах IE потребуется подключить дополнительный скриптик в разделе head HTML-странички:
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
Скрипт excanvas.js можно скачать из вложения.
В сообщениях ниже приводится код скриптов, а полные примеры можно качать из вложений.
Отрисовывает цифровые часы по размерам канвы. Имеется возможность менять некоторые настройки (цвета и прочее).
Код скрипта:
/*
Copyright 2013 Arigato Software
Скрипт цифровых часов на Canvas
Взято с http://programmersforum.ru/showthread.php?t=245008
*/
var DigitalClock = {
// Параметры часов
backColor: '#000', // цвет фона
darkColor: '#010', // цвет выключенного элемента
lightColor: '#0F0', // цвет включенного элемента
lineWidth: 24, // толщина линий
lineLength: 100, // длина линий
/*
- 0
| | 1 2
- 3
| | 4 5
- 6
*/
digits: [
[1,1,1,0,1,1,1], // 0
[0,0,1,0,0,1,0], // 1
[1,0,1,1,1,0,1], // 2
[1,0,1,1,0,1,1], // 3
[0,1,1,1,0,1,0], // 4
[1,1,0,1,0,1,1], // 5
[1,1,0,1,1,1,1], // 6
[1,0,1,0,0,1,0], // 7
[1,1,1,1,1,1,1], // 8
[1,1,1,1,0,1,1] // 9
],
// Запуск часов
start: function(canvasId) {
var canvas = document.getElementById(canvasId);
if ( canvas.getContext ) {
var context = canvas.getContext('2d');
this.context = context;
var xScale = canvas.width / this.offset(18, 4);
var yScale = canvas.height / this.offset(4, 2);
context.scale(xScale, yScale);
this.tick();
setInterval(function(){DigitalClock.tick()}, 1000);
}
},
// Получить цвет элемента
getColor: function(bool) {
return ( bool ) ? this.lightColor : this.darkColor;
},
// Рассчитать смещение элемента
offset: function(countWidth, countLength) {
return countWidth * this.lineWidth + countLength * this.lineLength;
},
// Отображение цифры на канве
drawDigit: function(x, y, digit) {
var ctx = this.context;
ctx.save();
ctx.translate(x, y);
ctx.lineWidth = this.lineWidth;
ctx.lineCap = 'round';
// рисуем горизонтальные линии
for (var i = 0; i < 3; i++) {
var y = i * this.offset(1, 1);
ctx.beginPath();
ctx.strokeStyle = this.getColor(this.digits[digit][i*3]);
ctx.moveTo(this.offset(1, 0), y);
ctx.lineTo(this.offset(0, 1), y);
ctx.stroke();
}
// рисуем вертикальные линии
for (var j = 0; j < 2; j++) {
var y = j * this.offset(1, 1);
for (var i = 0; i < 2; i++) {
var x = i * this.offset(1, 1);
ctx.beginPath();
ctx.strokeStyle = this.getColor(this.digits[digit][1+j*3+i]);
ctx.moveTo(x, y + this.offset(1, 0));
ctx.lineTo(x, y + this.offset(0, 1));
ctx.stroke();
}
}
ctx.restore();
},
// Отображение числа на канве
drawNumber: function(x, y, number, digits) {
x += this.offset(4, 1) * (digits - 1);
for ( ; digits--; ) {
this.drawDigit(x, y, number % 10);
number = Math.floor(number / 10);
x -= this.offset(4, 1);
}
},
// Отрисовка часов
tick: function() {
// получаем текущее время
var now = new Date();
var hr = now.getHours();
var mn = now.getMinutes();
var sc = now.getSeconds();
// выводим на канву
this.context.fillStyle = this.backColor;
this.context.fillRect(0, 0, this.offset(18, 4), this.offset(4, 2));
this.drawNumber(this.offset(1, 0), this.offset(1, 0), hr, 2);
this.drawNumber(this.offset(12, 2), this.offset(1, 0), mn, 2);
// рисуем точки
this.context.beginPath();
this.context.arc(this.offset(9, 2), this.offset(1.5, 0.5), this.lineWidth, 0, 2 * Math.PI, true);
this.context.arc(this.offset(9, 2), this.offset(2.5, 1.5), this.lineWidth, 0, 2 * Math.PI, true);
this.context.fillStyle = this.getColor(sc % 2);
this.context.strokeStyle = this.backColor;
this.context.lineWidth = 1;
this.context.fill();
this.context.stroke();
}
};
Много других примеров теме на форуме
Похожие статьи
Купить рекламу на сайте за 1000 руб
пишите сюда - alarforum@yandex.ru
Да и по любым другим вопросам пишите на почту
пеллетные котлы
Пеллетный котел Emtas
Наши форумы по программированию:
- Форум Web программирование (веб)
- Delphi форумы
- Форумы C (Си)
- Форум .NET Frameworks (точка нет фреймворки)
- Форум Java (джава)
- Форум низкоуровневое программирование
- Форум VBA (вба)
- Форум OpenGL
- Форум DirectX
- Форум CAD проектирование
- Форум по операционным системам
- Форум Software (Софт)
- Форум Hardware (Компьютерное железо)