来源:自学PHP网 时间:2018-02-08 09:56 作者: 阅读:次
[导读] 我们可以在HTML5 canvas上绘制绘制文字,并且可以设置文字的字体,大小和颜色。绘制文字的字体由2D上下文的font属性来控制。...
我们可以在 上绘制绘制文字,并且可以设置文字的字体,大小和颜色。 绘制文字的字体由2D上下文的 要在canvas上绘制文字,可以通过2D上下文的 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上绘制文字的时候,我们可以设置文字的字体和样式。我们可以通过一组2D上下文的 [font style][font weight][font size][font face] 举例来说,我们可以这样设置字体: context.font = "normal normal 20px Verdana"; 对于上面的这些属性,我们可以有下面的一些可取值:
需要注意的是,不是所有的浏览器都支持所有这些属性的,实际使用中你需要根据实际情况做一些测试。 当在HTML5 canvas中绘制文字的时候,你可以绘制填充文字,也可以绘制描边文字。它们分别通过2D上下文的 fillText (textString, x, y [,maxWidth]); strokeText (textString, x, y [,maxWidth]);
下面是一个示例代码: context.font = "36px Verdana"; context.fillStyle = "#000000"; context.fillText("HTML5 Canvas Text", 50, 50); 可选参数 context.font = "36px Verdana"; context.fillStyle = "#000000"; context.fillText("HTML5 Canvas Text", 50, 50); context.fillText("HTML5 Canvas Text", 50, 100, 200); 上面的代码的返回结果如下,注意第二串文字被压缩为总宽度200像素: 文字的填充或描边颜色是通过2D上下文的 在2D上下文中有一个函数可以用于测量文本的宽度,返回以像素为单位的结果值。这个函数不能测量高度。这个函数是 var textMetrics = context.measureText("measure this"); var width = textMetrics.width; 通过测量文本的宽度,我们可以知道当前的这些文字是否能够放在当前的canvas容器中,或者其它一些用途。 文本的基线用于决定如何解释 可以通过2D上下文的 文本基线的语法为: ctx.textBaseline= "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom"; 下表中列出了文本基线的可取值及其描述。
看了上面的描述大家会一头雾水。现在举例来说明。我们使用相同的 上面图片的实现代码如下: context.stokeStyle = "#000000"; context.lineWidth = 1; context.beginPath(); context.moveTo( 0, 75); context.lineTo(500, 75); context.stroke(); context.closePath(); context.font = "16px Verdana"; 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上下文的
ctx.textAlign = "left" || "right" || "center" || "start" || "end"; 下表中列出了
在下面的例子中显示了 上面的图片的实现代码如下: 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); |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com