是否可以在 HTML5 canvas 上编写文本？
text</a>。这是一本非常好的读物。
var canvas = document.getElementById("my-canvas"); var context = canvas.getContext("2d"); context.fillStyle = "蓝色"; context.font = "粗体 16px Arial"; context.fillText("Zibri", (canvas.width / 2) - 17, (canvas.height / 2) + 8); #my-canvas { 背景：#FF0; }
在画布上绘制文本
标记：
<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 documentation 和此 JSFiddle 示例。
Canvas 文本支持实际上相当不错 - 您可以控制 font、size、color、horizontal alignment、vertical alignment，还可以通过获取文本指标来获取以像素为单位的文本宽度。此外，您还可以使用画布transforms 到rotate、stretch 甚至invert 文本。
在画布上写文字真的很容易。目前尚不清楚您是否希望某人在 HTML 页面中输入文本然后让该文本出现在画布上，或者您是否打算使用 JavaScript 将信息写入屏幕。
以下代码将以不同的字体和格式将一些文本写入您的画布。您可以修改它，因为您希望测试在画布上书写的其他方面。
<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.
您可以将画布 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);
我猜这取决于你想用它做什么。如果您只想写一些普通的文本，您可以使用 .fillText()。
是的，当然您可以轻松地在画布上书写文本，并且可以设置字体名称、字体大小和字体颜色。在 Canvas 上构建文本有两种方法，即 fillText() 和 strokeText()。 fillText() 方法用于制作只能用颜色填充的文本，而 strokeText() 方法用于制作只能赋予轮廓颜色的文本。因此，如果我们要构建一个充满颜色并具有轮廓颜色的文本，我们必须同时使用它们。
这里是完整的例子，如何在画布上写文本：
<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
我找到了 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
将文本写入画布很容易。假设您的画布声明如下。
<html>
<canvas id="YourCanvas" width="500" height="500">
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>
亚马逊上有一个 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 的初学者指南，非常物有所值。几天前我买了它，它向我展示了许多非常有用的简单技术。
关注公众号
不定期副业成功案例分享
fillText