Có thể viết văn bản trên HTML5 canvaskhông?

Vẽ văn bản trên Canvas

Đánh dấu:

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

Script (với một vài tùy chọn khác nhau):

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

Kiểm tra tài liệu MDN và ví dụ về JSFiddle này .

Canvashỗ trợ văn bản thực sự là khá tốt - bạn có thể kiểm soát font, size, color, horizontal alignment, vertical alignment, và bạn cũng có thể có được số liệu văn bản để có được chiều rộng văn bản bằng pixel. Ngoài ra, bạn cũng có thể sử dụng vải transformsđể rotate, stretchvà thậm chí cả invertvăn bản.

Nó thực sự dễ dàng để viết văn bản trên một khung vẽ. Không rõ liệu bạn có muốn ai đó nhập văn bản vào trang HTML và sau đó văn bản đó xuất hiện trên khung vẽ hoặc nếu bạn định sử dụng JavaScript để ghi thông tin lên màn hình.

Đoạn mã sau sẽ viết một số văn bản theo các phông chữ và định dạng khác nhau vào khung vẽ của bạn. Bạn có thể sửa đổi điều này khi bạn muốn kiểm tra các khía cạnh khác của việc viết lên một khung vẽ.

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

Bạn có thể đặt thẻ ID canvas trong HTML và sau đó tham chiếu tên hoặc bạn có thể tạo canvas trong mã JavaScript. Tôi nghĩ rằng đối với hầu hết các phần tôi thấy <canvas>thẻ trong mã HTML và đôi khi thấy nó được tạo động trong chính mã JavaScript.

Mã số:

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

Tôi phụ thuộc vào những gì bạn muốn làm với nó tôi đoán. Nếu bạn chỉ muốn viết một số văn bản bình thường, bạn có thể sử dụng .fillText().

Có tất nhiên bạn có thể viết một văn bản trên vải dễ dàng và bạn có thể đặt tên phông chữ, kích thước phông chữ và màu phông chữ. Có hai phương pháp để xây dựng một văn bản trên Canvas, đó là fillText () và StroText () . Phương thức fillText () được sử dụng để tạo một văn bản chỉ có thể được tô màu, trong khi StroText () được sử dụng để tạo một văn bản chỉ có thể được cung cấp một màu phác thảo. Vì vậy, nếu chúng ta muốn xây dựng một văn bản chứa đầy màu sắc và có màu phác thảo, chúng ta phải sử dụng cả hai.

đây là ví dụ đầy đủ, cách viết văn bản trên canvas:

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

Đây là bản demo cho điều này và bạn có thể tự thử bất kỳ sửa đổi nào: http://okeschool.com/examples/canvas/html5-canvas-text-color

Tôi tìm thấy một hướng dẫn tốt trên oreilly.com .

Mã ví dụ:

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

lịch sự: @Ashish Nautiyal

Thật dễ dàng để viết văn bản vào một khung vẽ. Hãy nói rằng bạn canvas được khai báo như dưới đây.

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

Phần mã này trả về một biến thành canvas, đại diện cho canvas của bạn trong HTML.

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

Đoạn mã sau trả về các phương thức để vẽ các đường, văn bản, điền vào khung vẽ của bạn.

  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>

Có một hướng dẫn dành cho người mới bắt đầu trên Amazon dành cho người mẫu http://www.amazon.com/HTML5-Canvas-Guide-Beginners-ebook/dp/B00JSFVY9O/ref=sr_1_4?ie=UTF8&qid=1398113376&sr=88 + vải + người mới bắt đầu rất đáng tiền. Tôi đã mua nó vài ngày trước và nó cho tôi thấy rất nhiều kỹ thuật đơn giản rất hữu ích.