Data commit
This commit is contained in:
Ingy döt Net
parent
7387c8f97b
commit
cb5bb5e222
199093 changed files with 3378972 additions and 0 deletions
47
Task/Draw-a-clock/JavaScript/draw-a-clock-1.js
Normal file
47
Task/Draw-a-clock/JavaScript/draw-a-clock-1.js
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
var sec_old = 0;
|
||||
function update_clock() {
|
||||
var t = new Date();
|
||||
var arms = [t.getHours(), t.getMinutes(), t.getSeconds()];
|
||||
if (arms[2] == sec_old) return;
|
||||
sec_old = arms[2];
|
||||
|
||||
var c = document.getElementById('clock');
|
||||
var ctx = c.getContext('2d');
|
||||
ctx.fillStyle = "rgb(0,200,200)";
|
||||
ctx.fillRect(0, 0, c.width, c.height);
|
||||
ctx.fillStyle = "white";
|
||||
ctx.fillRect(3, 3, c.width - 6, c.height - 6);
|
||||
ctx.lineCap = 'round';
|
||||
|
||||
var orig = { x: c.width / 2, y: c.height / 2 };
|
||||
arms[1] += arms[2] / 60;
|
||||
arms[0] += arms[1] / 60;
|
||||
draw_arm(ctx, orig, arms[0] * 30, c.width/2.5 - 15, c.width / 20, "green");
|
||||
draw_arm(ctx, orig, arms[1] * 6, c.width/2.2 - 10, c.width / 30, "navy");
|
||||
draw_arm(ctx, orig, arms[2] * 6, c.width/2.0 - 6, c.width / 100, "maroon");
|
||||
}
|
||||
|
||||
function draw_arm(ctx, orig, deg, len, w, style)
|
||||
{
|
||||
ctx.save();
|
||||
ctx.lineWidth = w;
|
||||
ctx.lineCap = 'round';
|
||||
ctx.translate(orig.x, orig.y);
|
||||
ctx.rotate((deg - 90) * Math.PI / 180);
|
||||
ctx.strokeStyle = style;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-len / 10, 0);
|
||||
ctx.lineTo(len, 0);
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function init_clock() {
|
||||
var clock = document.createElement('canvas');
|
||||
clock.width = 100;
|
||||
clock.height = 100;
|
||||
clock.id = "clock";
|
||||
document.body.appendChild(clock);
|
||||
|
||||
window.setInterval(update_clock, 200);
|
||||
}
|
||||
133
Task/Draw-a-clock/JavaScript/draw-a-clock-2.js
Normal file
133
Task/Draw-a-clock/JavaScript/draw-a-clock-2.js
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
canvas {
|
||||
background-color: black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas></canvas>
|
||||
<script>
|
||||
var canvas = document.querySelector("canvas");
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
var g = canvas.getContext("2d");
|
||||
|
||||
// which leds are on or off for each digit
|
||||
var masks = ["1110111", "0010010", "1011101", "1011011", "0111010",
|
||||
"1101011", "1101111", "1010010", "1111111", "1111011"];
|
||||
|
||||
// horizontal and vertical layouts in scalable units
|
||||
var vertices = [
|
||||
[
|
||||
[0, 0], [1, 1], [7, 1], [8, 0], [7, -1], [1, -1]
|
||||
],
|
||||
[
|
||||
[0, 0], [-1, 1], [-1, 7], [0, 8], [1, 7], [1, 1]
|
||||
]
|
||||
];
|
||||
|
||||
function Led(x, y, idx, ox, oy) {
|
||||
// starting points in scalable units
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
|
||||
// horizontal or vertical layout
|
||||
this.idx = idx;
|
||||
|
||||
// pixel values to create small gaps between the leds
|
||||
this.offset_x = ox;
|
||||
this.offset_y = oy;
|
||||
}
|
||||
|
||||
var leds = [];
|
||||
leds.push(new Led(0, 0, 0, 0, -1));
|
||||
leds.push(new Led(0, 0, 1, -1, 0));
|
||||
leds.push(new Led(8, 0, 1, 1, 0));
|
||||
leds.push(new Led(0, 8, 0, 0, 1));
|
||||
leds.push(new Led(0, 8, 1, -1, 2));
|
||||
leds.push(new Led(8, 8, 1, 1, 2));
|
||||
leds.push(new Led(0, 16, 0, 0, 3));
|
||||
|
||||
var onColor, offColor;
|
||||
|
||||
function drawDigitalClock(color1, color2, size) {
|
||||
|
||||
var clockWidth = (6 * 15 + 2 * 10) * size;
|
||||
var clockHeight = 20 * size;
|
||||
var x = (canvas.width - clockWidth) / 2;
|
||||
var y = (canvas.height - clockHeight) / 2;
|
||||
|
||||
onColor = color1;
|
||||
offColor = color2;
|
||||
|
||||
g.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
var date = new Date();
|
||||
var segments = [date.getHours(), date.getMinutes(), date.getSeconds()];
|
||||
|
||||
segments.forEach(function (value, index) {
|
||||
x = drawDigits(x, y, size, value);
|
||||
if (index < 2) {
|
||||
x = drawSeparator(x, y, size);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function drawDigits(x, y, size, timeUnit) {
|
||||
|
||||
var digit1 = Math.floor(timeUnit / 10);
|
||||
var digit2 = timeUnit % 10;
|
||||
|
||||
x = drawLeds(x, y, size, masks[digit1]);
|
||||
x = drawLeds(x, y, size, masks[digit2]);
|
||||
|
||||
return x;
|
||||
}
|
||||
|
||||
function drawSeparator(x, y, size) {
|
||||
|
||||
g.fillStyle = onColor;
|
||||
g.fillRect(x + 0.5 * size, y + 3 * size, 2 * size, 2 * size);
|
||||
g.fillRect(x + 0.5 * size, y + 10 * size, 2 * size, 2 * size);
|
||||
|
||||
return x + size * 10;
|
||||
}
|
||||
|
||||
function drawLeds(x, y, size, mask) {
|
||||
|
||||
leds.forEach(function (led, i) {
|
||||
|
||||
g.fillStyle = mask[i] == '1' ? onColor : offColor;
|
||||
|
||||
var xx = x + led.x * size + led.offset_x;
|
||||
var yy = y + led.y * size + led.offset_y;
|
||||
|
||||
drawLed(xx, yy, size, vertices[led.idx]);
|
||||
});
|
||||
|
||||
return x + size * 15;
|
||||
}
|
||||
|
||||
function drawLed(x, y, size, vertices) {
|
||||
|
||||
g.beginPath();
|
||||
g.moveTo(x, y);
|
||||
|
||||
vertices.forEach(function (vertex) {
|
||||
g.lineTo(x + vertex[0] * size, y + vertex[1] * size);
|
||||
});
|
||||
|
||||
g.closePath();
|
||||
g.fill();
|
||||
}
|
||||
|
||||
setInterval(drawDigitalClock, 1000, "#00FF00", "#002200", 12);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue