एचटीएमएल कैनवस लिखाई

कैनवस पर टेक्स्ट ड्राइंग

कैनवस पर टेक्स्ट ड्राइंग के लिए सबसे महत्वपूर्ण अभियान और तरीके हैं:

  • font - टेक्स्ट के फ़ॉन्ट अभियान
  • fillText(text,x,y) - कैनवस पर "फ़िल्टर किये गये" टेक्स्ट ड्राइंग
  • strokeText(text,x,y) - कैनवस पर टेक्स्ट ड्राइंग (फ़िल्टर नहीं)

fillText() का उपयोग करें

उदाहरण

फ़ॉन्ट को "30px Arial" सेट करें और कैनवस पर फ़िल्टर किये गये टेक्स्ट लिखें:

आपका ब्राउज़र HTML5 कैनवस टैग का समर्थन नहीं करता है。

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

स्वयं को प्रयास कीजिए

strokeText() का उपयोग करें

उदाहरण

फ़ॉन्ट को "30px Arial" सेट करें और कैनवस पर टेक्स्ट लिखें (फ़िल्टर नहीं):

आपका ब्राउज़र HTML5 कैनवस टैग का समर्थन नहीं करता है。

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

स्वयं को प्रयास कीजिए

रंग और टेक्स्ट को मध्यस्थ सेट करें

उदाहरण

फ़ॉन्ट को "30px Comic Sans MS" सेट करें और कैनवस के केंद्र में लाल रंग का टेक्स्ट लिखें:

आपका ब्राउज़र HTML5 कैनवस टैग का समर्थन नहीं करता है。

JavaScript:

const canvas = document.getElementById("myCanvas");
const 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);

स्वयं को प्रयास कीजिए

और देखें:

कोडडब्ल्यू3सी.कॉम के पूर्ण कैनवस संदर्भ मानवचर्चा