Html 如何在 HTML5 画布元素上书写文本？

How can I write text on a HTML5 canvas element?

提问by Budda

Is it possible to write text on HTML5 canvas?

是否可以在 HTML5 上编写文本canvas？

回答by Zibri

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>

回答by Lior Elrom

Drawing text on a Canvas

在画布上绘制文本

Markup:

标记：

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

Script (with few different options):

脚本（有几个不同的选项）：

<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 the MDN documentationand this JSFiddleexample.

查看MDN 文档和这个JSFiddle示例。

回答by Eric Rowell

Canvastext support is actually pretty good - you can control font, size, color, horizontal alignment, vertical alignment, and you can also get text metrics to get the text width in pixels. In addition, you can also use canvas transformsto rotate, stretchand even inverttext.

Canvas文本支持实际上非常好 - 您可以控制font, size, color, horizontal alignment, vertical alignment，并且您还可以获取文本度量以获取以像素为单位的文本宽度。此外，您还可以使用画布transforms来rotate，stretch甚至invert文本。

回答by Eric Rowell

It is really easy to write text on a canvas. It was not clear if you want someone to enter text in the HTML page and then have that text appear on the canvas, or if you were going to use JavaScript to write the information to the screen.

在画布上写文字真的很容易。目前尚不清楚您是否希望某人在 HTML 页面中输入文本，然后将该文本显示在画布上，或者您是否打算使用 JavaScript 将信息写入屏幕。

The following code will write some text in different fonts and formats to your canvas. You can modify this as you wish to test other aspects of writing onto a canvas.

以下代码将以不同的字体和格式将一些文本写入您的画布。您可以修改它，因为您希望测试在画布上书写的其他方面。

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

You can either place the canvas ID tag in the HTML and then reference the name or you can create the canvas in the JavaScript code. I think that for the most part I see the <canvas>tag in the HTML code and on occasion see it created dynamically in the JavaScript code itself.

您可以将画布 ID 标记放在 HTML 中，然后引用名称，也可以在 JavaScript 代码中创建画布。我认为在大多数情况下，我会<canvas>在 HTML 代码中看到标记，有时还会看到它是在 JavaScript 代码本身中动态创建的。

Code:

代码：

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

回答by Ian Devlin

Depends on what you want to do with it I guess. If you just want to write some normal text you can use .fillText().

我猜这取决于你想用它做什么。如果您只想编写一些普通文本，可以使用.fillText().

回答by Kuncara Kurniawan

Yes of course you can write a text on canvas with ease, and you can set the font name, font size and font color. There are two method to build a text on Canvas, i.e. fillText()and strokeText(). fillText()method is used to make a text that can only be filled with color, whereas strokeText()is used to make a text that can only be given an outline color. So if we want to build a text that filled with color and have outline color, we must use both of them.

是的，当然您可以轻松地在画布上书写文本，并且可以设置字体名称、字体大小和字体颜色。在 Canvas 上构建文本有两种方法，即fillText()和strokeText()。 fillText()方法用于制作只能填充颜色的文本，而strokeText()用于制作只能具有轮廓颜色的文本。因此，如果我们要构建一个填充颜色并具有轮廓颜色的文本，我们必须同时使用它们。

here the full example, how to write text on 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>

Here the demo for this, and you can try your self for any modification: http://okeschool.com/examples/canvas/html5-canvas-text-color

这是这个的演示，您可以尝试自己进行任何修改： http://okeschool.com/examples/canvas/html5-canvas-text-color

回答by Doug Hauf

It is easy to write text to a canvas. Lets say that you canvas is declared like below.

将文本写入画布很容易。假设您的画布如下声明。

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

This part of the code returns a variable into canvas which is a representation of your canvas in HTML.

这部分代码将一个变量返回到画布中，它是您的画布在 HTML 中的表示。

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

The following code returns the methods for drawing lines, text, fills to your canvas.

以下代码返回绘制线条、文本、填充到画布的方法。

  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>

There is a beginners guide out on Amazon for the 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+canvas+beginnersthat is well worth the money. I purchased it a couple of days ago and it showed me a lot of simple techniques that were very useful.

亚马逊上有一个 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 +帆布+初学者，物有所值。我几天前购买了它，它向我展示了许多非常有用的简单技术。

回答by Simon K Bhatta4ya

I found a good tutorial on oreilly.com.

我在 oreilly.com 上找到了一个很好的教程。

Example code:

示例代码：

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

courtesy: @Ashish Nautiyal

礼貌：@Ashish Nautiyal