如何在 HTML5 画布元素上编写文本？
Posted
技术标签:
【中文标题】如何在 HTML5 画布元素上编写文本？【英文标题】：How can I write text on a HTML5 canvas element? 【发布时间】：2011-04-11 11:44:04 【问题描述】：是否可以在 html5 canvas 上编写文本？
【问题讨论】：
我建议您阅读 diveintohtml5.info/">diveintohtml5</a> 网站，它有自己的 diveintohtml5.info/canvas.html#text">chapter abouttext。这是一本很好的读物。
如果您想使用 excanvas（用于 IE 支持）编写文本，除了其他答案之外，您还需要一个额外的脚本，可在此处获得：code.google.com/p/explorercanvas/issues/detail?id=6 默认下载（code.google.com/p/explorercanvas/downloads/list）不包含fillText和strokeText方法。
@IvanCastellanos 您是否找到任何相关的搜索结果？如果您发现它们，将它们发布在这里可能会有所帮助。
@IvanCastellanos - 这个问题（至少对我而言）现在在 Google 上的“HTML 画布文本”中排在首位。这不是 Stack Overflow 的目的吗？
是的，在 Canvas 上很容易做到这一点。我会在您的帖子中添加更多内容，以便您可以展示一些您尝试过和未尝试过的示例。只是这个问题对 ***.com 并没有那么有益
【参考方案1】：
Drawing text on a Canvas
标记：
<canvas id="myCanvas" ></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 documentation 和这个JSFiddle 示例。
【讨论】：
【参考方案2】：Canvas文字支持其实还不错——你可以控制font、size、color、horizontal alignment、vertical alignment，还可以通过获取文本度量来获取以像素为单位的文本宽度.此外，还可以使用画布transforms转rotate、stretch甚至invert文字。
【讨论】：
【参考方案3】：我猜这取决于你想用它做什么。如果你只是想写一些普通的文字，你可以使用.fillText()。
【讨论】：
【参考方案4】：将文本写入画布很容易。假设您的画布声明如下。
<html>
<canvas id="YourCanvas" >
Your Internet Browser does not support HTML5 (Get a new Browser)
</canvas>
</html>
这部分代码将一个变量返回到画布中，它是您的画布在 HTML 中的表示。
var c = document.getElementById("YourCanvas");
以下代码返回绘制线条、文本、填充画布的方法。
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>
Amazon 上有一个关于 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+beginners 的初学者指南，非常物有所值。几天前我买了它，它向我展示了许多非常有用的简单技术。
【讨论】：
【参考方案5】：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>【讨论】：
有什么方法可以获取字体宽度和大小以便我们可以居中吗？ （动态内容） 假设：你的画布 width-200, height:100 horizontal: ctx.textAlign = 'center' ctx.fillText('Hello', 100, 10) 垂直: ctx.textBaseline = 'middle' ctx.fillText('Hello', 10, 50) 文档：fillText【参考方案6】：
是的，您当然可以轻松地在画布上书写文本，并且您可以设置字体名称、字体大小和字体颜色。 在 Canvas 上构建文本有两种方法，即 fillText() 和 strokeText()。 fillText() 方法用于制作只能用颜色填充的文本，而 strokeText() 方法用于制作只能赋予轮廓颜色的文本.所以如果我们想构建一个填充颜色和轮廓颜色的文本，我们必须同时使用它们。
这里是完整的例子，如何在画布上写文本：
<canvas id="Canvas01" 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
【讨论】：
【参考方案7】：我找到了a good tutorial on oreilly.com。
示例代码：
<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
【讨论】：
【参考方案8】：在画布上写文字真的很容易。目前尚不清楚您是否希望某人在 HTML 页面中输入文本然后让该文本出现在画布上，或者您是否打算使用 javascript 将信息写入屏幕。
以下代码会将一些不同字体和格式的文本写入您的画布。您可以根据自己的需要对其进行修改，以测试在画布上书写的其他方面。
<canvas id="YourCanvasNameHere" >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.
您可以将画布 ID 标记放在 HTML 中，然后引用名称，也可以在 JavaScript 代码中创建画布。我认为在大多数情况下我会在 HTML 代码中看到 <canvas> 标记，有时还会看到它在 JavaScript 代码本身中动态创建。
代码：
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);
【讨论】：
以上是关于如何在 HTML5 画布元素上编写文本？的主要内容，如果未能解决你的问题，请参考以下文章