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

可以在 HTML5canvas上写文本吗？

196581 次浏览
小开

我想这取决于你想用它做什么。如果你只是想写一些正常的文本，你可以使用 .fillText()。

小开

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

小开
最佳答案 

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>

小开

我找到 在 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 页面中输入文本，然后将该文本显示在画布上，还是希望使用 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.

您可以在 HTML 中放置画布 ID 标记，然后引用名称，也可以在 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);
小开

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

<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的入门指南，非常值钱。我几天前买了它，它向我展示了很多非常有用的简单技巧。

小开

在画布上绘制文本

标价:

<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 上构建文本有两种方法，即 FilText ()和 StrokeText ()。FilText ()方法用于生成只能用颜色填充的文本，而 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 》杂志网站(http://okeschool.com/example.com/)原著:


提交答案