Форум программистов, компьютерный форум, киберфорум
Unick
Войти
Регистрация
Восстановить пароль
Yo1.
Оценить эту запись

I. Часы на canvas

Запись от Unick размещена 31.01.2014 в 22:52
Обновил(-а) Unick 31.01.2014 в 22:59

Нажмите на изображение для увеличения
Название: 0132761610.jpg
Просмотров: 295
Размер:	52.3 Кб
ID:	2064
Решил почитать книженцу:
Core HTML5 Canvas: Graphics, Animation, and Game Development, David Geary

В ней приводятся разные примеры... я так подумал, а почему бы самому ради интереса все примеры самому не реализовать? Ведь ничего сложного и заумного в канвасе нету. Так что сначала я сам задачку выполняю, а потом уже смотрю как ее выполнил автор.

Но поскольку читаю я книженцу на айпаде (когда нахожусь в пути), то и собственно программирую на коленках:
Нажмите на изображение для увеличения
Название: 2014-01-30 23.57.05.png
Просмотров: 506
Размер:	127.8 Кб
ID:	2063
Ну а куда деваться?) Ну и по сути, мне не трудно публиковать код, мало ли пригодится...

И вот первая задачка...

Часы на canvas
Название: Скриншот 2014-01-31 22.34.24.png
Просмотров: 453

Размер: 9.7 Кб

index.html
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>My Canvas</title>
</head>
<body>
     <canvas id="canvas" width="300" height="300"></canvas>
<script src="script.js"></script>
</body>
</html>
style.css
CSS
1
2
3
4
5
6
7
html{
background:#eee;
}
canvas{
display:block;
margin: 10px auto;
}
script.js
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
var canvas=document.getElementById("canvas");
 
var rc = 100; // радиус круга
var rcc = 120; // радиус для циферблата
var oneClock=Math.PI/6; // 1 час
var oneMin=Math.PI/30; // 1 минута
canvas.width=300;
canvas.height=300;
var context=canvas.getContext("2d");
 
function myClock(){
// рисуем статичные часы
context.clearRect(0,0,300,300);
context.beginPath();
context.arc(150,150,rc,0,Math.PI*2);
context.stroke();
 
context.beginPath();
context.arc(150,150,7,0, Math.PI*2);
context.fill();
 
// рисуем статичный циферблат
context.beginPath();
function angle(clock,oneClock){
    var r = 3*Math.PI/2+clock*oneClock;
    if (r<0) r+=2*Math.PI;
    return r;
}
context.font=" 20px Arial";
for(var i=1;i<=12;i++){
    context.fillText(i,Math.cos(angle(i,oneClock)) * rcc + 143,Math.sin(angle(i,oneClock)) * rcc + 155);
    context.moveTo(Math.cos(angle(i,oneClock)) * (rc-3) + 150,Math.sin(angle(i,oneClock)) *(rc-3) + 150);
    context.lineTo(Math.cos(angle(i,oneClock)) * rc + 150,Math.sin(angle(i,oneClock)) * rc + 150);
    
}
context.stroke();
 
// перемещение стрелок
function drawClock(clock){
    context.beginPath();
    context.lineWidth=3;
    context.moveTo(150,150);
    context.lineTo(Math.cos(angle(clock,oneClock)) * 50 + 150,Math.sin(angle(clock,oneClock)) * 50 + 150);
    context.stroke();
}
function drawMin(min){
    context.beginPath();
    context.lineWidth=2;
    context.moveTo(Math.cos(angle(min,oneMin)) * 15 + 150,Math.sin(angle(min,oneMin)) * 15 + 150);
    context.lineTo(Math.cos(angle(min,oneMin)) * 90 + 150,Math.sin(angle(min,oneMin)) * 90 + 150);
    context.stroke();
}
function drawSec(min){
    context.beginPath();
    context.lineWidth=1;
    context.moveTo(Math.cos(angle(min,oneMin)) * 45 + 150,Math.sin(angle(min,oneMin)) *45 + 150);
    context.lineTo(Math.cos(angle(min,oneMin)) * rc + 150,Math.sin(angle(min,oneMin)) * rc + 150);
    context.stroke();
}
 
    var time = new Date();
    drawClock(time.getHours());
    drawMin(time.getMinutes());
    drawSec(time.getSeconds());
}// myClock
 
setInterval(myClock,1000);
myClock();
Размещено в canvas
Просмотров 868 Комментарии 0
Всего комментариев 0
Комментарии
 
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.