您的位置: 首页 > 软件教程 > HTML教程专题 > 如何用HTML5 CANVAS绘制文字

如何用HTML5 CANVAS绘制文字

6.0分
出处:jQuery之家 时间:2017-03-10

您可能感兴趣的话题: 绘制文字  

核心提示:如何在HTML5 canvas上绘制绘制文字,并且可以设置文字的字体,大小和颜色。

  我们可以在HTML5 canvas上绘制绘制文字,并且可以设置文字的字体,大小和颜色。

  绘制文字的字体由2D上下文的font属性来控制。如果你需要使用颜色来填充文字或制作描边文字,可以使用2D上下文的fillStyle和strokeStyle属性来完成。

  要在canvas上绘制文字,可以通过2D上下文的fillText()函数或strokeText()函数来完成。下面是一个简单的例子:

  var canvas = document.getElementById("ex1");

  var context = canvas.getContext("2d");

  context.font = "normal 36px Verdana";

  context.fillStyle = "#000000";

  context.fillText("HTML5 Canvas Text", 50, 50);

  context.font = "normal 36px Arial";

  context.strokeStyle = "#000000";

  context.strokeText("HTML5 Canvas Text", 50, 90);

  下面的图片是上面代码的返回结果:

如何用HTML5 CANVAS绘制文字

  字体和样式

  当在HTML5 canvas上绘制文字的时候,我们可以设置文字的字体和样式。我们可以通过一组2D上下文的font属性来完成这些工作。这些属性和CSS中设置字体的属性是兼容的:

  [font style][font weight][font size][font face]

 

  举例来说,我们可以这样设置字体:

  context.font = "normal normal 20px Verdana";

  

  对于上面的这些属性,我们可以有下面的一些可取值:

  font style可取值有:

  normal

  italic

  oblique

  inherit

  font weight可取值有:

  normal

  bold

  bolder

  lighter

  auto

  inherit

  100

  200

  300

  400

  500

  600

  700

  800

  900

  font size:字体的尺寸,单位像素。

  ont face:字体。例如:verdana, arial, serif, sans-serif, cursive, fantasy, monospace等

  需要注意的是,不是所有的浏览器都支持所有这些属性的,实际使用中你需要根据实际情况做一些测试。

  绘制文字

  当在HTML5 canvas中绘制文字的时候,你可以绘制填充文字,也可以绘制描边文字。它们分别通过2D上下文的fillText()和strokeText()函数来实现。这两个函数的定义如下:

网友评论
精品软件课程
更多 >
Adobe Flash,是Macromedi... [详细]
Dreamweaver是网页制作和管理的所见... [详细]
MySQL是一个小型关系型数据库管理系统,被... [详细]
PHP是一种 HTML 内嵌式的语言,是一种... [详细]
Dreamweaver是网页制作和管理的所见... [详细]
JavaScript是基于对象和事件驱动并具... [详细]