Chapter 58: Clock Hands
Clock Hands in the most detailed, clear, and patient way possible. Imagine we’re sitting together at a desk. I’m your favorite teacher who wants you to really understand how the moving hands of an...
Author: web-admin
Chapter 59: Canvas Clock Start
Lesson: Canvas Clock – Starting from Absolute Zero Step 1 – The absolute bare-minimum canvas clock face (just a circle) Create this file and open it in the browser: HTML
|
0 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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas Clock – Step 1</title> <style> body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background: #0d1117; } canvas { border: 8px solid #30363d; border-radius: 50%; box-shadow: 0 0 60px rgba(0,0,0,0.8); } </style> </head> <body> <canvas id="clock" width="420" height="420"></canvas> <script> const canvas = document.getElementById('clock'); const ctx = canvas.getContext('2d'); // Center helpers (you will use these in every clock) const cx = canvas.width / 2; // 210 const cy = canvas.height / 2; // 210 const radius = canvas.width / 2 - 40; // leave space for thick border // Draw the simplest possible clock face: just one big circle ctx.beginPath(); ctx.arc(cx, cy, radius, 0, Math.PI * 2); ctx.fillStyle = '#161b22'; // very dark gray face ctx.fill(); ctx.strokeStyle = '#8b949e'; // silver/gray border ctx.lineWidth = 16; ctx.stroke(); // Temporary label so we know it's working ctx.fillStyle = '#c9d1d9'; ctx.font = 'bold 28px Arial'; ctx.textAlign = 'center'; ctx.fillText('Clock Face – Step 1', cx, cy + radius + 50); </script> </body> </html> |
What we have...
Chapter 60: Plotting
Plotting in the clearest, most patient, and detailed way possible. Imagine I’m your favorite math/computer-science teacher who really wants you to understand deeply, not just memorize formulas or copy code. We are going to...
Chapter 61: Plot Graphics
Plot Graphics one of the most useful and beautiful skills in programming, data science, mathematics, science, business, journalism… basically almost every field that deals with numbers. I’m going to explain this like your favorite...
