Saa ya Canvas

Kwenye mawazo yaliyofuata, tuta kusaidia kumia kifaa cha picha cha HTML kumwambia kichwaka cha saati cha mifano.

Mwongozo wa kwanza - Kuanza kifaa cha picha

Kichwaka cha saati inahitaji kifaa cha HTML. Kuanza kifaa cha picha cha HTML:

Kifaa cha HTML:

<!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>

Jifunze kwa urafiki wako

Muhtasari wa kifaa cha picha

Ongeza elementi ya <canvas> kwa ukurasa wako:

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

Kuandaa kifaa cha picha (const canvas):

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

Kuandaa kifaa cha picha ya 2d kwa kifaa cha picha (const ctx):

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

Tumia ukubwa wa rafiki ya picha kwa kumaliza radius ya kichwaka cha saati:

let radius = canvas.height / 2;

Msaada

Tumia ukubwa wa rafiki ya picha kwa kumaliza radius ya kichwaka cha saati, kwa kumalizwa kichwaka cha saati kwa ukubwa wa rafiki ya picha zote.

Kuandaa maelezo wa (0,0) ya kifaa cha picha kwenye kati ya rafiki ya picha:

ctx.translate(radius, radius);

Tunza radius ya kichwaka cha saati hadi 90% kwa kuandaa kichwaka cha saati kwenye rafiki ya picha:

radius = radius * 0.90;

Kuangchuan uandakwisha kwa kichwaka cha saati:

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

Tazama pia:

Kitabu cha Matokeo cha Kipya cha Canvas kwa CodeW3C.com