HTML5 Canvas如何绘制文本

这篇文章主要介绍HTML5 Canvas如何绘制文本，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
　　HTML5 Canvas 绘制文本
　　HTML5 Canvas 可以使用各种字体，大小和颜色在HTML5画布上绘制文本，文本的外观由这些2D Context font属性控制，要绘制文本，请使用fillText（）或strokeText（）功能。
　　在线示例
　　可以使用各种字体，大小和颜色在HTML5画布上绘制文本。
　　文本的外观由这些2D Context font属性控制。此外，您需要根据要绘制填充文本还是描边文本来设置fillStyle或strokeStyle2D Context属性。
　　要绘制文本，请使用fillText（）或strokeText（）功能
　　这是一个简单的代码示例：
　　示例
　　HTML5?Canvas?not?supported
　　var?canvas=?document.getElementById（”ex1″）;
　　var?context?=?canvas.getContext（”2d”）;
　　context.font?=?”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 not supported
　　字体和样式
　　在HTML5画布上绘制文本时，必须设置要使用的字体。这是通过设置2D上下文font属性的值来完成的。此属性是具有CSS兼容值的字符串，其格式为：[font?style][font?weight][font?size][font?face]
　　例如context.font?=?”normal?normal?20px?Verdana”;
　　您可以为字体字符串的每个部分设置以下值：font stylenormal
　　italic
　　oblique
　　inherit
　　font weightnormal
　　bold
　　bolder
　　lighter
　　auto
　　inherit
　　100
　　200
　　300
　　400
　　500
　　600
　　700
　　800
　　900
　　font size以像素为单位的大小，例如12px，20px等
　　font face字体， e.g. verdana, arial, serif, sans-serif, cursive, fantasy, monospace etc.
　　请注意，并非每个浏览器都支持所有值。在依赖它们之前，您将必须测试计划使用的值。
　　这是另一个示例：”italic?bold?36px?Arial”
　　绘图文字
　　如前所述，在HTML5画布上绘制文本时，您可以绘制填充文本或轮廓文本。您可以使用2D上下文函数fillText（）和进行操作strokeText（）。这些函数的定义如下：fillText?（textString,?x,?y?[,maxWidth]）;
　　strokeText?（textString,?x,?y?[,maxWidth]）;
　　该textString参数是绘制文本。
　　在x和y代表在文字中得出的位置。该x 参数是文本开始的地方。该y参数是文本垂直放置的位置，但是确切的表示方式取决于文本基线。文本基线将在后面的部分中介绍。
　　该maxWidth文本被覆盖在下面的部分。
　　这是一个代码示例：context.font=?”36px?Verdana”;
　　context.fillStyle?=?”#000000″;
　　context.fillText（”HTML5?Canvas?Text”,?50,?50）;
　　文字最大宽度
　　可选maxWidth参数告诉画布，文本在水平方向上不能比给定参数值占用更多空间。如果文字太宽而无法容纳 maxWidth，则文字的宽度将被压缩。它没有被切断。这是一个使用和不使用绘制相同文本的代码示例maxWidth:context.font=?”36px?Verdana”;
　　context.fillStyle?=?”#000000″;
　　context.fillText（”HTML5?Canvas?Text”,?50,?50）;
　　context.fillText（”HTML5?Canvas?Text”,?50,?100,?200）;
　　这是在HTML5画布上绘制时这两个文本的外观：HTML5 Canvas not supported
　　如您所见，第二个文本的宽度被压缩以适合maxWidth 200个像素。
　　文字颜色
　　像其他任何形状一样，使用2D上下文 的fillStyle和 strokeStyle属性设置填充或描边文本的颜色。在这里，我不会更详细地介绍这些属性。有关 更多详细信息，请参见描边和填充。
　　测量文字宽度
　　2D上下文对象具有可以测量文本像素宽度的功能。它无法测量高度。该函数称为measureText（）。这是一个代码示例：var?textMetrics?=?context.measureText（”measure?this”）;
　　var?width?=?textMetrics.width;
　　测量文本的宽度可用于计算文本字符串是否适合特定空间等。
　　文字基线
　　文本基线确定如何解释和 的y参数。换句话说，垂直放置文本的位置以及该位置的解释方式。请注意，浏览器在解释此属性的方式上也可能会有细微的差异。 fillText（）strokeText（）
　　使用textBaseline2D上下文的属性设置文本基线。以下是它可以采用的值及其含义：top文本根据文本中最高字形的顶部对齐
　　hanging文本根据似乎悬挂的行对齐。这几乎与top相同，并且在许多情况下您看不到差异。
　　middle文本根据文本的中间对齐。
　　alphabetic垂直定向字形的底部，例如拉丁字母等西方字母
　　ideographic水平定向字形的底部。
　　bottom文本是根据文本中字形的底部对齐的，该字形在文本中向下延伸最低。
　　这是一个示例，该示例y对所有文本使用相同的值（75）绘制文本，但对所绘制的每个文本使用不同的基线。将画一条线y=75，向您显示如何围绕该y值设置文本基线。HTML5 Canvas not supported
　　下面是生成上述图形的代码：context.stokeStyle?=?”#000000″;
　　context.lineWidth=?1;
　　context.beginPath（）;
　　context.moveTo（0,?75）;
　　context.lineTo（500,?75）;
　　context.stroke（）;
　　context.closePath（）;
　　context.font=?”16px?Ve免费云主机域名rdana”;
　　context.fillStyle?=?”#000000″;
　　context.textBaseline?=?”top”;
　　context.fillText（”top”,?0,?75）;
　　context.textBaseline?=?”hanging”;
　　context.fillText（”hanging”,?40,?75）;
　　context.textBaseline?=?”middle”;
　　context.fillText（”middle”,?120,?75）;
　　context.textBaseline?=?”alphabetic”;
　　context.fillText（”alphabetic”,?200,?75）;
　　context.textBaseline?=?”ideographic”;
　　context.fillText（”ideographic”,?300,?75）;
　　context.textBaseline?=?”bottom”;
　　context.fillText（”bottom-glyph”,?400,?75）;
　　文字对齐
　　2D上下文textAlign属性定义了绘制时文本如何水平对齐。换句话说，该textAlign属性定义了x绘制文本时的坐标。start紧随该x位置之后绘制文本
　　left紧随x位置之后才绘制文本，例如start。
　　center文本的中心位于一个x位置。
　　end文本的结尾位于x位置。
　　right文本的右边缘位于x位置，例如end。
　　以下是一些示例，显示了该textAlign属性的工作方式。垂直线在处绘制x = 250。所有文本也都绘制有x = 250，但是textAlign属性的值不同。
　　这是图形的代码示例：
　　示例
　　HTML5?Canvas?not?supported
　　var?canvas=?document.getElementById（”ex4″）;
　　var?context?=?canvas.getContext（”2d”）;
　　context.stokeStyle?=?”#000000″;
　　context.lineWidth=?1;
　　context.beginPath（）;
　　context.moveTo（？250,?0）;
　　context.lineTo（？250,?250）;
　　context.stroke（）;
　　context.closePath（）;
　　context.font=?”16px?Verdana”;
　　context.fillStyle?=?”#000000″;
　　context.textAlign?=?”center”;
　　context.fillText（”center”,?250,?20）;
　　context.textAlign?=?”start”;
　　context.fillText（”start”,?250,?40）;
　　context.textAlign?=?”end”;
　　context.fillText（”end”,?250,?60）;
　　context.textAlign?=?”left”;
　　context.fillText（”left”,?250,?80）;
　　context.textAlign?=?”right”;
　　context.fillText（”right”,?250,?100）;以上是“HTML5 Canvas如何绘制文本”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注百云主机行业资讯频道！

相关推荐: javascript是否支持面向对象

本篇内容介绍了“javascript是否支持面向对象”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ JavaScript是支持面向对象的；面向对象编程是用抽象方…