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 इमेज
- अगला पृष्ठ कलक कवर
