এইচটিএমএল 5 ক্যানভাস উপাদানটিতে আমি কীভাবে পাঠ্য লিখতে পারি?

Question

এইচটিএমএল 5 এ লেখা লেখা কি সম্ভব canvas?

Comments

আমি <a href=" diveintohtml5.info/"> মাধ্যমে পড়া সুপারিশ করবে diveintohtml5 </ একটি নিজস্ব <a href=" diveintohtml5.info/canvas.html#text">> অধ্যায় সম্পর্কে text</a> । এটি একটি খুব ভাল পড়া।

— চেলমার্টজ

অন্যান্য উত্তরগুলির পাশাপাশি আপনি যদি এক্সওয়ানভাস ব্যবহার করে পাঠ্য লিখতে চান ( আইআই সমর্থনের জন্য) আপনার এখানে একটি অতিরিক্ত স্ক্রিপ্টের প্রয়োজন হবে: কোড. google.com.com/p/explorercanvas/issues/detail?id=6 ডিফল্ট ডাউনলোড (কোড. google.com/p/explorercanvas/downloads/list ) ফিলিটেক্সট এবং স্ট্রোকটেক্সট পদ্ধতি অন্তর্ভুক্ত করে না।

— কাস্ট্রোহেঞ্জ

@ ইভানক্যাসেলেলানোস আপনি কি কোনও প্রাসঙ্গিক অনুসন্ধান ফলাফল খুঁজে পেয়েছেন? আপনি যদি কিছু খুঁজে পান তবে তাদের এখানে পোস্ট করা সহায়ক হতে পারে।

— অ্যান্ডারসন গ্রিন

@ ইভানকাস্টেলানোস - এই প্রশ্নটি (আমার পক্ষে কমপক্ষে) এখন গুগলে "এইচটিএমএল ক্যানভাস টেক্সট" শীর্ষে আসে। এটি কি স্ট্যাক ওভারফ্লোয়ের উদ্দেশ্য নয়?

— কলিঙ্কামেরন

হ্যাঁ এটি ক্যানভাসে করা সহজ। আমি আপনার পোস্টে আরও যুক্ত করব যাতে আপনি কী চেষ্টা করেছেন এবং কী চেষ্টা করেননি তার কয়েকটি উদাহরণ দেখাতে পারেন। কেবল পাশাপাশি প্রশ্নটি স্ট্যাকওভারফ্লো ডটকমের পক্ষে সত্যই উপকারী নয়

— ডগ হাউফ

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 = 'কেন্দ্র' ctx.fillText ('হ্যালো', 100 , 10) উল্লম্ব : ctx.textBaseline = 'মাঝারি' ctx.fillText ('হ্যালো', 10 , 50 )

— tomision

ডকুমেন্টেশন: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

ক্যানভাসে লেখাটি লেখা সত্যিই সহজ। আপনি যদি এইচটিএমএল পৃষ্ঠায় কোনও পাঠ্য প্রবেশ করান এবং তারপরে সেই টেক্সটটি ক্যানভাসে হাজির করাতে চান, বা আপনি যদি স্ক্রিনে তথ্য লেখার জন্য জাভাস্ক্রিপ্ট ব্যবহার করতে যাচ্ছিলেন তবে এটি স্পষ্ট ছিল না।

নিম্নলিখিত কোডটি আপনার ক্যানভাসে বিভিন্ন ফন্ট এবং ফর্ম্যাটে কিছু পাঠ্য লিখবে। আপনি ক্যানভাসে লেখার অন্যান্য দিকগুলি পরীক্ষা করতে ইচ্ছুক আপনি এটি পরিবর্তন করতে পারেন।

 <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>এইচটিএমএল কোডটিতে ট্যাগটি দেখি এবং উপলক্ষ্যে এটি জাভাস্ক্রিপ্ট কোডেই গতিশীলভাবে তৈরি হয়েছিলাম ।

কোড:

  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

হ্যাঁ অবশ্যই আপনি সহজেই ক্যানভাসে একটি পাঠ্য লিখতে পারেন এবং আপনি ফন্টের নাম, ফন্টের আকার এবং ফন্টের রঙ সেট করতে পারেন। ক্যানভাসে একটি পাঠ্য নির্মাণের জন্য দুটি পদ্ধতি রয়েছে, যেমন ফিলিটেক্সট () এবং স্ট্রোকটেক্সট () । ভরাটেক্সট () পদ্ধতিটি এমন একটি পাঠ্য তৈরি করতে ব্যবহৃত হয় যা কেবল রঙ দিয়ে পূর্ণ হতে পারে, তবে স্ট্রোকটেক্সট () একটি পাঠ্য তৈরি করতে ব্যবহৃত হয় যা কেবলমাত্র একটি বাহ্যরেখার রঙ দেওয়া যেতে পারে। সুতরাং আমরা যদি এমন কোনও পাঠ্য তৈরি করতে চাই যা রঙ দিয়ে পূর্ণ হয় এবং এর রূপরেখা রঙ থাকে তবে আমাদের অবশ্যই দুটি ব্যবহার করতে হবে।

এখানে সম্পূর্ণ উদাহরণ, ক্যানভাসে পাঠ্য কীভাবে লিখবেন:

<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>

কোডটির এই অংশটি ক্যানভাসে পরিবর্তনশীল ফেরত দেয় যা এইচটিএমএলে আপনার ক্যানভাসের উপস্থাপনা।

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

নিম্নলিখিত কোডটি আপনার ক্যানভাসে লাইন, পাঠ্য অঙ্কন করার পদ্ধতিগুলি ফেরৎ দেয় returns

  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 / এইচটিএমএল 5- ক্যানভাস- গুড-Beginners-ebook / dp / B00JSFVY9O / ref = sr_1_4 ? ie = UTF8&qid = 1398113376&sr = 8-4&keyवर्ड = html5 জন্য অ্যামাজনে একটি শিক্ষানবিশ গাইড রয়েছে + ক্যানভাস + প্রারম্ভিক যা অর্থের উপযুক্ত। আমি কয়েক দিন আগে এটি কিনেছি এবং এটি আমাকে অনেকগুলি সহজ কৌশল দেখিয়েছিল যা খুব দরকারী।