8 回复 | 直到 11 年前

1

238

Mr. Polywhirl 8 年前

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>

2

7

Community Mohan Dere 5 年前

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

3

6

Mamun 8 年前

Canvas font size , color horizontal alignment , vertical alignment ,您还可以获取文本度量,以获取以像素为单位的文本宽度。此外,还可以使用画布 transforms rotate , stretch 甚至 invert 文本。

4

5

Paul D. Waite 11 年前

 <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中放置canvas ID标记,然后引用名称,也可以在JavaScript代码中创建canvas。我想我看到的大部分是 <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);

5

4

Mamun 8 年前

我想这要看你想用它做什么了。如果你只是想写一些普通的文字,你可以用 .fillText() .

6

3

Kuncara Kurniawan 11 年前

是的,当然你可以轻松地在画布上写一个文本,你可以设置字体名称,字体大小和字体颜色。在画布上构建文本有两种方法,即。 填充文本() 和 . 填充文本() 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

7

1

Paul D. Waite 11 年前

我发现 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

8

1

damix911 8 年前

在画布上写文字很容易。假设您的画布声明如下。

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

这部分代码将一个变量返回到canvas中,它是用HTML表示的canvas。

  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

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

Drawing text on a Canvas