Bir HTML5 tuval öğesine nasıl metin yazabilirim?

Question 1

HTML5 üzerine metin yazmak mümkün müdür canvas?

Question 2

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>

Snippet'i genişlet

Question 3

Tuval üzerine metin çizme

İşaretleme:

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

Komut dosyası (birkaç farklı seçenekle):

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

Check out MDN belgelerine ve bu JSFiddle örneği.

Question 4

CanvasMetin desteği aslında oldukça iyi - kontrol edebilirsiniz font, size, color, horizontal alignment, vertical alignment, ve ayrıca metin ölçümlerini piksel olarak metin genişliğini almak için alabilirsiniz. Buna ek olarak, aynı zamanda tuval kullanabilirsiniz transformsetmek rotate, stretchhatta invertmetni.

Question 5

Bir tuvale metin yazmak gerçekten çok kolay. Birinin HTML sayfasına metin girip ardından bu metnin tuvalde görünmesini isteyip istemediğiniz veya bilgileri ekrana yazmak için JavaScript kullanıp kullanmayacağınız belli değildi.

Aşağıdaki kod, tuvalinize farklı yazı tiplerinde ve formatlarda bazı metinler yazacaktır. Bir tuvale yazmanın diğer yönlerini test etmek için bunu dilediğiniz gibi değiştirebilirsiniz.

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

Tuval kimliği etiketini HTML'ye yerleştirebilir ve ardından ada başvurabilir veya JavaScript kodunda tuvali oluşturabilirsiniz. Çoğunlukla <canvas>etiketi HTML kodunda gördüğümü ve bazen JavaScript kodunun kendisinde dinamik olarak oluşturulduğunu düşünüyorum.

Kod:

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

Question 6

Onunla ne yapmak istediğine bağlı sanırım. Eğer sadece normal bir metin yazmak istiyorsanız kullanabilirsiniz .fillText().

Question 7

Evet elbette tuval üzerine kolaylıkla bir metin yazabilir ve yazı tipi adını, yazı tipi boyutunu ve yazı tipi rengini ayarlayabilirsiniz. Canvas'ta bir metin oluşturmanın iki yöntemi vardır, yani fillText () ve strokText () . fillText () yöntemi yalnızca renkle doldurulabilen bir metin oluşturmak için kullanılırken , strokText () yalnızca bir anahat rengi verilebilen bir metin oluşturmak için kullanılır. Dolayısıyla, renkle dolu ve anahat rengine sahip bir metin oluşturmak istiyorsak, ikisini de kullanmalıyız.

işte tam örnek, tuvale nasıl metin yazılır:

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

İşte bunun için demo ve herhangi bir değişiklik için kendinizi deneyebilirsiniz: http://okeschool.com/examples/canvas/html5-canvas-text-color

Question 8

Buldum oreilly.com üzerinde iyi bir öğretici .

Örnek kod:

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

nezaket: @Ashish Nautiyal

Question 9

Bir tuvale metin yazmak kolaydır. Diyelim ki tuvaliniz aşağıdaki gibi ilan edildi.

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

Kodun bu bölümü, tuvalinizin HTML'deki bir temsili olan tuvalin içine bir değişken döndürür.

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

Aşağıdaki kod, tuvalinize çizgi, metin ve dolgu çizme yöntemlerini döndürür.

  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>

Kindle için Amazon'da yeni başlayanlar için bir rehber bulunmaktadır http://www.amazon.com/HTML5-Canvas-Guide-Beginners-ebook/dp/B00JSFVY9O/ref=sr_1_4?ie=UTF8&qid=1398113376&sr=8-4&keywords=html5 + paraya değer kanvas + yeni başlayanlar . Birkaç gün önce satın aldım ve bana çok faydalı olan birçok basit teknik gösterdi.