कैनवास घड़ी
इन अध्यायों में हम HTML कैनवास का उपयोग करके एक एनालॉग घड़ी का निर्माण करेंगे।
भाग I - कैनवास बनाएं
घड़ी को एक HTML कंटेनर की आवश्यकता होती है। एक HTML कैनवास बनाएं:
HTML कोड:
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="400"
height="400" style="background-color:#333"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var 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 id="canvas" width="400"
height="400" style="background-color:#333"></canvas>
HTML कैनवास तत्व से एक कैनवास ऑब्जेक्ट (var कैनवास) बनाएं:
var canvas =
document.getElementById("canvas");
कैनवास ऑब्जेक्ट के लिए 2d ड्रॉइंग ऑब्जेक्ट (var ctx) बनाएं:
var ctx = canvas.getContext("2d");
कैनवास की ऊंचाई का उपयोग करके घड़ी की त्रिज्या की गणना करें:
var 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();
}