Canvas ਘੜੀ
- ਪਿਛਲਾ ਪੰਨਾ Canvas ਚਿੱਤਰ
- ਅਗਲਾ ਪੰਨਾ ਘੜੀ ਰਿੰਗ
ਆਉਣ ਵਾਲੇ ਅਧਿਆਏ ਵਿੱਚ ਅਸੀਂ HTML ਕੈਨਵਾਸ ਦੀ ਮਦਦ ਨਾਲ ਇੱਕ ਮਾਪਦਰਸ਼ ਸਮੇਂ ਘੜੀ ਬਣਾਵਾਂਗੇ。
ਪਹਿਲਾ ਹਿੱਸਾ - ਕੈਨਵਾਸ ਬਣਾਓ
ਸਮੇਂ ਘੜੀ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ HTML ਕੰਟੇਨਰ ਚਾਹੀਦਾ ਹੈ।HTML ਕੈਨਵਾਸ ਬਣਾਓ:
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>
ਕੋਡ ਵਿਸਥਾਰ
ਆਪਣੀ ਪੰਜਾਬੀ ਪੰਨੇ ਵਿੱਚ HTML <canvas> ਐਲੀਮੈਂਟ ਜੋੜੋ:
<canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas>
ਇੱਕ ਕੈਨਵਾਸ ਅਬਜੈਕਟ (const canvas) ਬਣਾਓ:
const canvas = document.getElementById("canvas");
ਕੈਨਵਾਸ ਅਬਜੈਕਟ ਲਈ ਇੱਕ 2d ਡਰਾਇੰਗ ਅਬਜੈਕਟ (const ctx) ਬਣਾਓ:
const ctx = canvas.getContext("2d");
ਕੈਨਵਾਸ ਦੀ ਉਚਾਈ ਦੀ ਮਦਦ ਨਾਲ ਸਮੇਂ ਘੜੀ ਦੀ ਰੇਡੀਅਸ ਨੂੰ ਹੱਲ ਕਰੋ:
let radius = canvas.height / 2;
ਸੁਝਾਅ
ਕੈਨਵਾਸ ਦੀ ਉਚਾਈ ਦੀ ਮਦਦ ਨਾਲ ਸਮੇਂ ਘੜੀ ਦੀ ਰੇਡੀਅਸ ਨੂੰ ਹੱਲ ਕਰੋ ਤਾਂ ਕਿ ਸਮੇਂ ਘੜੀ ਸਾਰੇ ਕੈਨਵਾਸ ਦੇ ਮੋਟਾਰ ਵਿੱਚ ਤਰਕਸ਼ ਹੋ ਸਕੇ:
ਡਰਾਇੰਗ ਅਬਜੈਕਟ ਦੇ (0,0) ਸਥਾਨ ਨੂੰ ਕੈਨਵਾਸ ਦੇ ਕੇਂਦਰ ਵਿੱਚ ਮੁੜ ਮੈਪ ਕਰੋ:
ctx.translate(radius, radius);
ਸਮੇਂ ਘੜੀ ਦੀ ਰੇਡੀਅਸ ਨੂੰ ਘਟਾਓ (90%) ਅਤੇ ਸਮੇਂ ਘੜੀ ਨੂੰ ਕੈਨਵਾਸ ਵਿੱਚ ਚਿੱਤਰਿਤ ਕਰੋ:
radius = radius * 0.90;
ਸਮੇਂ ਘੜੀ ਦਾ ਡਰਾਇੰਗ ਕਰਨ ਲਈ ਫੰਕਸ਼ਨ ਬਣਾਓ:
function drawClock() {
ctx.arc(0, 0, radius, 0 , 2 * Math.PI);
ctx.fillStyle = "white";
ctx.fill();
}
ਹੋਰ ਦੇਖੋ:
- ਪਿਛਲਾ ਪੰਨਾ Canvas ਚਿੱਤਰ
- ਅਗਲਾ ਪੰਨਾ ਘੜੀ ਰਿੰਗ
