150

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

html canvas

— 布达
source

1

我建议您阅读<a href=" diveintohtml5.info/"> diveintohtml5 </ a >网站，它有自己的<a href=" diveintohtml5.info/canvas.html#text">关于text</a>的章节。这是一本很好的读物。

— chelmertz

除了其他答案（如果您想使用exanvas编写文本（用于IE支持）），您还需要一个其他脚本，可在此处找到：code.google.com/p/explorercanvas/issues/detail?id=6默认下载（code.google.com/p/explorercanvas/downloads/list）不包含fillText和strokeText方法。

— Castrohenge

2

@IvanCastellanos您找到任何相关的搜索结果吗？如果发现它们，将其张贴在此处可能会有所帮助。

— 安德森·格林

2

@IvanCastellanos-这个问题（至少对我来说）现在在Google的“ HTML画布文本”中排名最高。这不是堆栈溢出的目的吗？

— colincameron 2013年

是的，在Canvas上很容易做到。我会在您的帖子中添加更多内容，以便您可以显示一些示例，这些示例说明了您尝试过的内容和未尝试过的内容。只是这个问题对Stackoverflow.com并没有真正的好处

— Doug Hauf 2014年

234

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>

展开摘要

— 日布里
source

3

有什么方法可以获取字体的宽度和大小，以便我们将其居中？（动态内容）

— Oliver Dixon 2014年

1

假设：画布宽度200，高度：100 水平：ctx.textAlign = '中心' ctx.fillText（ '你好'，100，10）垂直：ctx.textBaseline = '中间' ctx.fillText（ '你好'，10 ，50）

— tomision

文档：fillText

— jpaugh

7

在画布上绘制文本

标记：

<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示例。

— 利尔·埃罗姆（Lior Elrom）
source

6

Canvas文本支持实际上是相当不错的-你可以控制font，size，color，horizontal alignment，vertical alignment，并且还可以获得文本度量获得以像素为单位文本宽度。此外，你也可以用帆布transforms来rotate，stretch甚至invert文本。

— 埃里克·罗威尔
source

5

在画布上写文本真的很容易。目前尚不清楚是否要有人在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代码中创建画布。我认为在大多数情况下，我会<canvas>在HTML代码中看到该标记，有时还会看到它在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);

— 保罗·D·威特
source

4

我猜取决于您要使用的功能。如果您只想编写一些普通文本，则可以使用.fillText()。

— 伊恩·德夫林
source

3

是的，您当然可以轻松地在画布上写文本，并且可以设置字体名称，字体大小和字体颜色。有两种在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

— 昆卡拉·库尼亚万
source

1

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

— 西蒙K Bhatta4ya
source

1

将文字写入画布很容易。可以说您的画布的声明如下。

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

这部分代码将变量返回到canvas中，该变量是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 +画布+初学者非常值得。我是几天前购买的，它向我展示了许多非常有用的简单技术。

— 道格·豪夫
source

如何在HTML5 canvas元素上写文本？

在画布上绘制文本