एचटीएमएल कैनवास टेक्स्ट
कैनवास पर पाठ खींचना
कैनवास पर टेक्स्ट बनाने के लिए, सबसे महत्वपूर्ण गुण और विधियाँ हैं:
- फ़ॉन्ट - पाठ के लिए फ़ॉन्ट गुणों को परिभाषित करता है
- fillText ( पाठ, x, y ) - कैनवास पर "भरा हुआ" पाठ खींचता है
- स्ट्रोकटेक्स्ट ( पाठ, x, y ) - कैनवास पर पाठ खींचता है (कोई भरण नहीं)
फिलटेक्स्ट का उपयोग करना ()
उदाहरण
फ़ॉन्ट को 30px "एरियल" पर सेट करें और कैनवास पर एक भरा हुआ टेक्स्ट लिखें:
जावास्क्रिप्ट:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
स्ट्रोकटेक्स्ट का उपयोग करना ()
उदाहरण
फ़ॉन्ट को 30px "एरियल" पर सेट करें और कैनवास पर बिना किसी भरण के एक टेक्स्ट लिखें:
जावास्क्रिप्ट:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
रंग और केंद्र टेक्स्ट जोड़ें
उदाहरण
फ़ॉन्ट को 30px "Comic Sans MS" पर सेट करें और कैनवास के केंद्र में एक भरा हुआ लाल टेक्स्ट लिखें:
जावास्क्रिप्ट:
var
canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);