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

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

在画布上绘制文本

标记:

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

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代码中创建画布.我认为在大多数情况下,我<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);