Drawing text on a Canvas

Question

是否可以在HTML5 canvas上撰写文字？

Answer 1

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>

Answer 2

Drawing text on a 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 documentation和此JSFiddle示例。

Answer 3

Canvas文字支持实际上相当不错 - 您可以控制font，size，color，horizontal alignment，vertical alignment和您还可以获取文本指标以获取文本宽度（以像素为单位）。此外，您还可以使用画布transforms至rotate，stretch甚至invert文字。

Answer 4

在画布上写文字真的很容易。目前尚不清楚是否希望有人在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);

Answer 5

取决于你想用它做什么我想。如果您只想写一些普通文本，可以使用.fillText()。

Answer 6

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

Answer 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

Answer 8

将文本写入画布很容易。让我们说你的画布声明如下。

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

在亚马逊上有一个初学者指南，指出{$ 3}}非常物有所值。我几天前买了它，它向我展示了许多非常有用的简单技术。

如何在HTML5画布元素上书写文字？

8 个答案:

Drawing text on a Canvas