मैं HTML5 कैनवास तत्व पर टेक्स्ट कैसे लिख सकता हूं?

Question

क्या HTML5 पर टेक्स्ट लिखना संभव है canvas?

Comments

मैं <a href=" diveintohtml5.info/"> के माध्यम से पढ़ने की सिफारिश करेंगे diveintohtml5 </ एक का अपना <a href=" diveintohtml5.info/canvas.html#text">> अध्याय के बारे में text</a> । बहुत अच्छा पढ़ा है।

— chelmertz

अन्य उत्तरों के अलावा यदि आप एक्सनव्स (IE समर्थन के लिए) का उपयोग करके पाठ लिखना चाहते हैं, तो आपको यहां उपलब्ध अतिरिक्त स्क्रिप्ट की आवश्यकता होगी: code.google.com/p/explorercanvas/issues/detail?id=6 डिफ़ॉल्ट डाउनलोड ( code.google.com/p/explorercanvas/downloads/list ) भरण और स्ट्रोक विधि शामिल नहीं है।

— कास्त्रोहेंगे

@IvanCastellanos क्या आपको कोई प्रासंगिक खोज परिणाम मिले? यदि आपको कोई भी मिल जाए, तो उन्हें यहां पोस्ट करना मददगार हो सकता है।

— एंडरसन ग्रीन

@IvanCastellanos - यह प्रश्न (कम से कम मेरे लिए) अब Google पर "HTML कैनवास पाठ" के लिए शीर्ष पर आता है। क्या यह स्टैक ओवरफ्लो का उद्देश्य नहीं है?

— कोलिनसिमरन

हाँ, कैनवस पर ऐसा करना आसान है। मैं आपके पोस्ट को और अधिक जोड़ूंगा ताकि आप कुछ उदाहरण दिखा सकें कि आपने क्या प्रयास किया है और आपने क्या प्रयास नहीं किया है। साथ ही सवाल वास्तव में Stackoverflow.com के लिए फायदेमंद नहीं है

— डग Hauf

Answer 1

var canvas = document.getElementById("my-canvas");
var context = canvas.getContext("2d");

context.fillStyle = "blue";
context.font = "bold 16px Arial";
context.fillText("Zibri", (canvas.width / 2) - 17, (canvas.height / 2) + 8);

#my-canvas {
  background: #FF0;
}

<canvas id="my-canvas" width="200" height="120"></canvas>

Comments

क्या फ़ॉन्ट की चौड़ाई और आकार प्राप्त करने का कोई तरीका है ताकि हम इसे केंद्र में रख सकें? (डायनामिक कंटेंट)

— ओलिवर डिक्सन

मान लें: आपका कैनवास चौड़ाई -200, ऊंचाई: 100 क्षैतिज : ctx.textAlign = 'center' ctx.fillText ('हैलो', 100 , 10) लंबवत : ctx.textBaseline = "मध्य" ctx.fillText ('हैलो', 10) , ५० )

— फरवरी को ०

प्रलेखन:fillText

— jpaugh

Answer 2

एक कैनवास पर पाठ आकर्षित करना

मार्कअप:

<canvas id="myCanvas" width="300" height="150"></canvas>

स्क्रिप्ट (कुछ अलग विकल्पों के साथ):

<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.font = 'italic 18px Arial';
    ctx.textAlign = 'center';
    ctx. textBaseline = 'middle';
    ctx.fillStyle = 'red';  // a color name or by using rgb/rgba/hex values
    ctx.fillText('Hello World!', 150, 50); // text and position
</script>

की जाँच करें MDN दस्तावेजीकरण और इस JSFiddle उदाहरण।

Answer 3

Canvasपाठ समर्थन वास्तव में बहुत अच्छी है - आप नियंत्रित कर सकते हैं font, size, color, horizontal alignment, vertical alignment, और आप भी पाठ मैट्रिक्स पिक्सल में पाठ चौड़ाई प्राप्त करने के लिए मिल सकता है। इसके अलावा, आप भी कैनवास का उपयोग कर सकते transformsकरने के लिए rotate, stretchऔर यहां तक कि invertपाठ।

Answer 4

कैनवास पर पाठ लिखना वास्तव में आसान है। यह स्पष्ट नहीं था कि यदि आप चाहते हैं कि कोई व्यक्ति HTML पृष्ठ में पाठ दर्ज करे और फिर वह पाठ कैनवास पर दिखाई दे, या यदि आप स्क्रीन पर जानकारी लिखने के लिए जावास्क्रिप्ट का उपयोग करने जा रहे हैं।

निम्नलिखित कोड आपके कैनवस के विभिन्न फोंट और प्रारूपों में कुछ पाठ लिखेंगे। आप इसे कैनवास पर लिखने के अन्य पहलुओं का परीक्षण करना चाहते हैं।

 <canvas id="YourCanvasNameHere" width="500" height="500">Canvas not supported</canvas>

 var c = document.getElementById('YourCanvasNameHere');
 var context = c.getContext('2d'); //returns drawing functions to allow the user to draw on the canvas with graphic tools. 

आप या तो कैनवास आईडी टैग को HTML में रख सकते हैं और फिर नाम का संदर्भ दे सकते हैं या आप जावास्क्रिप्ट को जावास्क्रिप्ट कोड में बना सकते हैं। मुझे लगता है कि अधिकांश भाग के लिए मैं <canvas>HTML कोड में टैग देखता हूं और मौके पर इसे जावास्क्रिप्ट कोड में ही गतिशील रूप से बनाया गया है।

कोड:

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  context.font = 'bold 10pt Calibri';
  context.fillText('Hello World!', 150, 100);
  context.font = 'italic 40pt Times Roman';
  context.fillStyle = 'blue';
  context.fillText('Hello World!', 200, 150);
  context.font = '60pt Calibri';
  context.lineWidth = 4;
  context.strokeStyle = 'blue';
  context.strokeText('Hello World!', 70, 70);

Answer 5

इस पर निर्भर करता है कि आप इसके साथ क्या करना चाहते हैं मुझे लगता है। यदि आप केवल कुछ सामान्य पाठ लिखना चाहते हैं तो आप उपयोग कर सकते हैं .fillText()।

Answer 6

हां, आप कैनवस पर एक पाठ आसानी से लिख सकते हैं, और आप फ़ॉन्ट नाम, फ़ॉन्ट आकार और फ़ॉन्ट रंग सेट कर सकते हैं। कैनवस पर एक पाठ बनाने की दो विधियाँ हैं, जैसे कि fillText () और stroText () । fillText () मेथड का उपयोग टेक्स्ट बनाने के लिए किया जाता है जिसे केवल रंग से भरा जा सकता है, जबकि स्ट्रोकटेक्स्ट () का उपयोग एक टेक्स्ट बनाने के लिए किया जाता है जिसे केवल एक आउटलाइन रंग दिया जा सकता है। इसलिए यदि हम एक ऐसे टेक्स्ट का निर्माण करना चाहते हैं जो रंग से भरा हो और उसमें रंग रूप हो, तो हमें दोनों का उपयोग करना चाहिए।

यहाँ पूरा उदाहरण है, कैसे कैनवास पर पाठ लिखने के लिए:

<canvas id="Canvas01" width="400" height="200" style="border:2px solid #bbb; margin-left:10px; margin-top:10px;"></canvas>

<script>
  var canvas = document.getElementById('Canvas01');
  var ctx = canvas.getContext('2d');

  ctx.fillStyle= "red";
  ctx.font = "italic bold 35pt Tahoma";
  //syntax : .fillText("text", x, y)
  ctx.fillText("StacOverFlow",30,80);

</script>

यहां इसके लिए डेमो, और आप किसी भी संशोधन के लिए अपने स्वयं की कोशिश कर सकते हैं: http://okeschool.com/examples/canvas/html5-canvas-text-color

Answer 7

मुझे अजवायन.कॉम पर एक अच्छा ट्यूटोरियल मिला ।

उदाहरण कोड:

<canvas id="canvas" width ='600px'></canvas><br />
Enter your Text here .The Text will get drawn on the canvas<br />
<input type="text" id="text" onKeydown="func();"></input><br />
</body><br />
<script>
function func(){
var e=document.getElementById("text"),t=document.getElementById("canvas"),n=t.getContext("2d");
n.fillStyle="#990000";n.font="30px futura";n.textBaseline="top";n.fillText(e.value,150,0);n.fillText("thank you, ",200,100);
n.fillText("Created by ashish",250,120)
}
</script>

सौजन्य: @ आशीष नौटियाल

Answer 8

कैनवास पर पाठ लिखना आसान है। कहते हैं कि आप कैनवास को नीचे की तरह घोषित किया जाता है।

<html>
  <canvas id="YourCanvas" width="500" height="500">
   Your Internet Browser does not support HTML5 (Get a new Browser)
  </canvas>
</html>

कोड का यह भाग कैनवास में एक चर देता है जो HTML में आपके कैनवास का प्रतिनिधित्व करता है।

  var c  = document.getElementById("YourCanvas");

निम्न कोड आपके कैनवास पर रेखाओं, पाठ को भरने के लिए तरीके देता है।

  var ctx = canvas.getContext("2d");

<script>
  ctx.font="20px Times Roman";
  ctx.fillText("Hello World!",50,100);

  ctx.font="30px Verdana";

  var g = ctx.createLinearGradient(0,0,c.width,0);

  g.addColorStop("0","magenta");
  g.addColorStop("0.3","blue");
  g.addColorStop("1.0","red");

  ctx.fillStyle=g; //Sets the fille of your text here. In this case it is set to the gradient that was created above. But you could set it to Red, Green, Blue or whatever.

  ctx.fillText("This is some new and funny TEXT!",40,190);
</script>

किंडल के लिए अमेज़न पर शुरुआती गाइड हैं http://www.amazon.com/HTML5-Canvas-Guide-Beginners-ebook/dp/B00JSFVY9O/ref=sr_1_4?ie-UTF8&qid=1398113376&sr=8-4&keywords=html5 + कैनवास + शुरुआती जो पैसे के लायक है। मैंने इसे कुछ दिनों पहले खरीदा था और इसने मुझे बहुत सारी सरल तकनीकें दिखाईं जो बहुत उपयोगी थीं।