Html5Canvas文本API1.显示基本文本要在画布上显示文本，最简单的定义方法是使用CSS字体样式属性的标准值设置context.font的样式：font-style、font-weight、font-size、font-脸。Html5Canvas上下文对象包含一个有用的方法measureText()。当提供文本字符串时，它会根据当前上下文的设置以TextMetrics对象的形式返回有关该文本的一些属性。现在TextMetrics对象只有一个属性：宽度。TextMetrics对象的Width属性提供在画布上呈现时文本的确切像素宽度。这对于居中文本非常有用。您可以使用measureText()方法计算文本的中心位置：functiontextPos(message){varmetrics=context.measureText(message);vartextWidth=metrics.Width;varxPosition=(theCanvas.width/2)-(textWidth/2);varyPosition=(theCanvas.height/2);返回{x:xPosition,y:yPosition};有两种方法可以在画布上渲染文本：fillText([text],[x],[y],[maxWidth]);strokeText([text],[x],[y],[maxWidth]);text是指在画布上渲染的文本，x和y对应的是文本在画布上的坐标，maxWidth是指在画布上渲染的最大宽度。2.设置文本字体要在Canvas中设置字体，你只需要在context.font属性中应用一个CSS兼容的字符串来设置字体大小、粗细、样式和字体外观。基本格式如下：[字体样式][字体粗细][字体大小][字体外观]例如：context.font="italicbold24pxserif"。您可以设置合理的属性并将它们拼接在一起：context.font=fontWeight+''+fontStyle+''+fontSize+'px'+fontFace您可以使用新的HTML5范围表单控件来指定字体的大小。range是一个类型，可以在html页面上创建一个slider来限制字数输入的范围，它有四个属性，min是范围的最小值，max是范围的最大值，step是rangeslider的移动step单位数和value是默认的range值。要为文本着色，只需将有效的CSSRGB颜色设置为context.fillStyle或context.strokeStyle属性。（补充：也可以用jsColor来处理字体颜色。）在Canvas中，它的字体有两种选择，垂直和水平。这些参考Canvas本身应用于文本，它围绕着文本顶部、底部、右侧和左侧的不可见边框。垂直和水平对齐有以下两个属性：context.textBaselinecontext。文本对齐3。透明度、阴影和渐变可以使用Canvas上下文的globalAlpha属性来设置对象的透明度。也可以通过设置Canvas上下文对象的shadow属性来设置阴影。1）线性渐变：可以调用上下文的createLinearGradient()方法创建渐变向导。vargradient=context.creatLinearGradient([x0],[y0],[x1],[y1]);x0和y0是参考线的起点，x1和y1是参考线的终点坐标。创建渐变参考线后，需要添加产生渐变层次的颜色，这需要如下函数：addColorStop([offset],[color])该函数有两个参数。offset这是渐变参考线起始色阶的位移，整个渐变由0.0到1.0的小数表示的百分比值定义。颜色。表示格式为“#RRGGBB”的有效CSS颜色。2）径向渐变：径向渐变类似于线性渐变，只不过它是圆锥体而不是直线。这个圆锥体是通过调用Canvas上下文的createRadialGradient()函数由两个圆的圆心和半径定义的。4.最后，让我们使用一个Canvas对象：functioncreateImageDataPressed(e){varimageDataDisplay=document.getElementById('imageDataDisplay');imageDataDisplay.value=theCanvas.toDataURL();window.open(imageDataDisplay.value,"canvasImage","left=0,top=0,width="+theCanvas.width+",height="+theCanvas.height+",too;bar=0,resizable=0");}然后利用以上知识点实现一个TextArranger：
