Clock ng Canvas

Sa mga susunod na kabanata, gagamitin namin ang HTML na canvas upang bumuo ng isang simuladong orasan.

Unang bahagi - Lumikha ng Canvas

Kailangan ng orasan ng HTML na may container. Lumikha ng HTML na canvas:

HTML Kodigo:

<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
drawClock();
function drawClock() {
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  ctx.fillStyle = "white";
  ctx.fill();
{}
</script>
</body>
</html>

Subukan Mo Ito

Paglalarawan ng Kodigo

Magdagdag ng HTML <canvas> element sa iyong pahina:

<canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas>

Lumikha ng bagay na may canvas (const canvas):

const canvas = document.getElementById("canvas");

Lumikha ng 2d na pinta para sa bagay na may canvas (const ctx):

const ctx = canvas.getContext("2d");

Gamitin ang taas ng canvas para makalkula ang laki ng radius ng orasan:

let radius = canvas.height / 2;

Mga Babala

Gamitin ang taas ng canvas para makalkula ang laki ng radius ng orasan, upang ang orasan ay umangkop sa lahat ng laki ng canvas.

Ibalik ang posisyon ng (0,0) ng ginagamit na pinta sa gitna ng canvas:

ctx.translate(radius, radius);

Bawasan ang laki ng radius ng orasan (sa 90%), at ililipat ang orasan sa loob ng canvas:

radius = radius * 0.90;

Makita ang function na magpipinta ng orasan:

function drawClock() {
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  ctx.fillStyle = "white";
  ctx.fill();
{}

Mga ibang pagkikita:

Complete Reference Manual ng Canvas ng CodeW3C.com