Jak mogę napisać tekst na elemencie Canvas HTML5?

150

Czy można pisać tekst w HTML5 canvas?

html canvas Budda
źródło
1
Polecam przeczytanie strony <a href=" diveintohtml5.info/"> diveintohtml5 </ a >, która ma swój własny <a href=" diveintohtml5.info/canvas.html#text"> rozdział o text</a> . To bardzo dobra lektura.
chelmertz
Oprócz innych odpowiedzi, jeśli chcesz pisać tekst za pomocą excanvas (do obsługi IE), potrzebujesz dodatkowego skryptu, dostępnego tutaj: code.google.com/p/explorercanvas/issues/detail?id=6 Domyślne pobieranie ( code.google.com/p/explorercanvas/downloads/list ) nie zawiera metody fillText i strokeText.
Castrohenge,
2
@IvanCastellanos Czy znalazłeś odpowiednie wyniki wyszukiwania? Pomocne może być umieszczenie ich tutaj, jeśli jakieś znalazłeś.
Anderson Green
2
@IvanCastellanos - to pytanie (przynajmniej dla mnie) pojawia się teraz u góry w przypadku „Tekstu płótna HTML” w Google. Czy to nie jest celem przepełnienia stosu?
colincameron
Tak, łatwo to zrobić na płótnie. Dodałbym więcej do twojego postu, abyś mógł pokazać kilka przykładów tego, czego próbowałeś, a czego nie. Samo pytanie nie jest tak korzystne dla Stackoverflow.com
Doug Hauf

Odpowiedzi:

234 

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>
Rozwiń fragment

Zibri
źródło
3
Czy istnieje sposób, aby uzyskać szerokość i rozmiar czcionki, abyśmy mogli ją wyśrodkować? (Treść dynamiczna)
Oliver Dixon,
1
załóżmy: Twoje płótno szerokość-200, wysokość: 100 poziomo : ctx.textAlign = 'center' ctx.fillText ('Hello', 100 , 10) vertical : ctx.textBaseline = 'middle' ctx.fillText ('Hello', 10 , 50 )
tomision
Dokumentacja:fillText
jpaugh
7

Rysowanie tekstu na płótnie

Narzut:

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

Skrypt (z kilkoma różnymi opcjami):

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

Zapoznaj się z dokumentacją MDN i tym przykładem JSFiddle .

Lior Elrom
źródło
6

CanvasWsparcie tekst jest faktycznie dość dobre - można kontrolować font, size, color, horizontal alignment, vertical alignment, i można również uzyskać dane tekstowe, aby uzyskać szerokość tekstu w pikselach. Ponadto możesz również użyć płótna transformsdo rotate, stretcha nawet inverttekstu.

Eric Rowell
źródło
5

Pisanie tekstu na płótnie jest naprawdę łatwe. Nie było jasne, czy chcesz, aby ktoś wprowadził tekst na stronie HTML, a następnie ten tekst pojawił się na płótnie, czy też zamierzasz użyć JavaScript do zapisania informacji na ekranie.

Poniższy kod zapisze tekst w różnych czcionkach i formatach na płótnie. Możesz to zmienić, jeśli chcesz przetestować inne aspekty pisania na płótnie.

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

Możesz umieścić znacznik ID kanwy w kodzie HTML, a następnie odwołać się do nazwy, lub możesz utworzyć kanwę w kodzie JavaScript. Myślę, że przeważnie widzę <canvas>tag w kodzie HTML, a czasami widzę, że jest on tworzony dynamicznie w samym kodzie JavaScript.

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);
Paul D. Waite
źródło
4

Chyba zależy od tego, co chcesz z tym zrobić. Jeśli chcesz tylko napisać zwykły tekst, możesz użyć .fillText().

Ian Devlin
źródło
3

Tak, oczywiście, możesz z łatwością pisać tekst na płótnie, a także możesz ustawić nazwę czcionki, rozmiar czcionki i kolor czcionki. Istnieją dwie metody na budowę tekst na płótnie, tj fillText () i strokeText () . fillText () służy do tworzenia tekstu, który może być wypełniony tylko kolorem, natomiast strokeText () służy do tworzenia tekstu, można nadać tylko kolor konturu. Jeśli więc chcemy zbudować tekst, który jest wypełniony kolorem i ma kolor konturu, musimy użyć obu z nich.

tutaj pełny przykład, jak pisać tekst na płótnie:

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

Oto demo tego i możesz wypróbować własną modyfikację: http://okeschool.com/examples/canvas/html5-canvas-text-color

Kuncara Kurniawan
źródło
1

Znalazłem dobry tutorial na oreilly.com .

Przykładowy 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>

dzięki uprzejmości: @Ashish Nautiyal

Simon K Bhatta4ya
źródło
1

Pisanie tekstu na płótnie jest łatwe. Powiedzmy, że twoje płótno jest zadeklarowane jak poniżej.

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

Ta część kodu zwraca zmienną do kanwy, która jest reprezentacją twojego płótna w HTML.

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

Poniższy kod zwraca metody rysowania linii, tekstu i wypełnień na kanwie.

  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>

W serwisie Amazon jest przewodnik dla początkujących dotyczący kindle http://www.amazon.com/HTML5-Canvas-Guide-Beginners-ebook/dp/B00JSFVY9O/ref=sr_1_4?ie=UTF8&qid=1398113376&sr=8-4&keywords=html5 + płótno + początkujący, który jest wart swojej ceny. Kupiłem go kilka dni temu i pokazał mi wiele prostych technik, które były bardzo przydatne.

Doug Hauf
źródło