我如何在HTML5 canvas元素上编写文本？
是否可以在HTML5 canvas上书写文字？
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>
Canvas文本支持其实是相当不错的 – 您可以控制字体，大小，颜色，水平alignment，垂直alignment，还可以获取文本度量以获取文本宽度（以像素为单位）。 另外，您还可以使用canvas变换来旋转，拉伸甚至翻转文字。
在canvas上写文本是很容易的。 目前尚不清楚您是否希望某人在HTML页面中input文本，然后将该文本显示在canvas上，或者您要使用JavaScript将信息写入屏幕。
以下代码将以不同的字体和格式将一些文本写入您的canvas。 你可以修改它，因为你想testing写在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.
您可以将canvasID标记放置在HTML中，然后引用该名称，也可以在JavaScript代码中创buildcanvas。 我认为大多数情况下，我会在HTML代码中看到<canvas>标记，偶尔会看到它在JavaScript代码本身中dynamic创build。
码：
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);
取决于你想用它做什么，我猜。 如果你只是想写一些正常的文本，你可以使用.fillText（）
这里是如何绘制/使用canvas的文字：
标记：
<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 。
当然，您可以轻松地在canvas上书写文字，并且可以设置字体名称，字体大小和字体颜色。 有两种方法在Canvas上构build文本，即fillText（）和strokeText（） 。 fillText（）方法用于制作只能用颜色填充的文本，而strokeText（）用于制作只能用轮廓颜色的文本。 所以如果我们想要build立一个充满颜色和轮廓颜色的文本，我们必须使用它们两个。
这里是完整的例子，如何在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>
这里演示这个，你可以尝试你自己的任何修改： http : //okeschool.com/examples/canvas/html5-canvas-text-color
我在oreilly.com上find了一个很好的教程 。
示例代码：
<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>
礼貌：@Ashish Nautiyal
将文本写入canvas很容易。 可以说，你的canvas被宣布如下。
<html> <canvas id="YourCanvas" width="500" height="500"> Your Internet Browser does not support HTML5 (Get a new Browser) </canvas> </html>
代码的这一部分将一个variables返回到canvas中，这是HTML中的canvas表示。
var c = document.getElementById("YourCanvas");
下面的代码返回绘制线条，文本，填充到您的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>
亚马逊网站上有一个初学者指南http://www.amazon.com/HTML5-Canvas-Guide-Beginners-ebook/dp/B00JSFVY9O/ref=sr_1_4?ie=UTF8&qid=1398113376&sr=8-4&keywords=html5 +帆布+初学者 ，这是非常值得的钱。 我前几天购买了它，并向我展示了许多非常有用的简单技术。
