利用HTML5 Canvas对text文本进行渲染;
fmms
13年前
<p><span style="font-family:comic sans ms,sans-serif;font-size:16px;">html5 canvas中支持对text文本进行渲染;</span><br /> <span style="font-family:comic sans ms,sans-serif;font-size:16px;">直接的理解就是把text绘制在画布上，并像图形一样处理它（可以加shadow、gradient、pattern、color fill等等）；</span><br /> <span style="font-family:comic sans ms,sans-serif;font-size:16px;">既然它的本质是文字，就会具有文字所特有的一些属性；本篇的侧重点也在于此；</span><br /> <span style="font-family:comic sans ms,sans-serif;font-size:16px;">不过，在最后会增加一些图形填充效果在text上应用的实例；</span></p> <p> </p> <p><span style="font-family:comic sans ms,sans-serif;font-size:16px;"><strong><span style="color:#3366ff;">context.font:</span></strong></span><br /> <span style="font-family:comic sans ms,sans-serif;font-size:16px;">[font style] [font weight] [font size] [font face]</span><br /> <span style="font-family:comic sans ms,sans-serif;font-size:16px;">字体属性的设置与css中的类似；</span><br /> <span style="font-family:comic sans ms,sans-serif;font-size:16px;">例：context.font = "italic bold 24px serif"; context.font = "normal lighter 50px cursive";</span></p> <p><span style="font-family:comic sans ms,sans-serif;font-size:16px;"><strong><span style="color:#3366ff;">context.measureText(message):</span></strong></span><br /> <span style="font-family:comic sans ms,sans-serif;font-size:16px;">当我们提供一个文本message,调用此方法，</span><br /> <span style="font-family:comic sans ms,sans-serif;font-size:16px;">它会依据当前context设置的字体、大小等，返回一个文本的度量信息对象TextMetrics；</span><br /> <span style="font-family:comic sans ms,sans-serif;font-size:16px;">当前html5 canvas中TextMetrics对象，仅包含一个属性，就是width; </span><br /> <span style="font-family:comic sans ms,sans-serif;font-size:16px;">可以用来确定当前给定字符串文本的在当前环境下的宽度；</span><br /> <span style="font-family:comic sans ms,sans-serif;font-size:16px;">例如：</span><br /> <span style="font-family:comic sans ms,sans-serif;font-size:16px;">var metrics = context.measureText(message);</span><br /> <span style="font-family:comic sans ms,sans-serif;font-size:16px;">var textWidth = metrics.width;</span></p> <p><br /> <span style="font-family:comic sans ms,sans-serif;font-size:16px;"><strong><span style="color:#3366ff;">fillText([text],[x],[y],[maxWidth]):</span></strong></span><br /> <span style="font-family:comic sans ms,sans-serif;font-size:16px;">参数的意义：</span><br /> <span style="font-family:comic sans ms,sans-serif;font-size:16px;">text:要在canvas上要渲染的文本内容；</span><br /> <span style="font-family:comic sans ms,sans-serif;font-size:16px;">x,y:代表开始渲染的点的位置坐标；</span><br /> <span style="font-family:comic sans ms,sans-serif;font-size:16px;">maxWidth:代表最大宽度；</span></p> <p><span style="font-family:comic sans ms,sans-serif;font-size:16px;">与之搭配的设置文本的颜色属性：<span style="color:#3366ff;">fillStyle</span></span></p> <p><br /> <span style="font-family:comic sans ms,sans-serif;font-size:16px;"><strong><span style="color:#3366ff;">strokeText([text],[x],[y],[maxWidth]):</span></strong></span><br /> <span style="font-family:comic sans ms,sans-serif;font-size:16px;">参数的意义与fillText相同；与fillText相比，它指渲染文字的轮廓；</span><br /> <span style="font-family:comic sans ms,sans-serif;font-size:16px;">与之搭配的设置文本的颜色属性：<span style="color:#3366ff;">strokeStyle</span></span></p> <p><br /> <span style="font-family:comic sans ms,sans-serif;font-size:16px;">Canvas中有对文本对齐方式的支持,包括两个选项：水平Horizontal alignment与竖直Vertical alignment；</span><br /> <span style="font-family:comic sans ms,sans-serif;font-size:16px;"><strong><span style="color:#3366ff;">context.textAlign</span></strong>：文字水平对齐方式。可取属性值: start, end, left,right, center。默认值:start.</span><br /> <span style="font-family:comic sans ms,sans-serif;font-size:16px;"><strong><span style="color:#3366ff;">context.textBaseline</span></strong>：文字竖直对齐方式。可取属性值：top, hanging, middle,alphabetic, ideographic, bottom。默认值：alphabetic.</span></p> <p><span style="font-family:comic sans ms,sans-serif;font-size:16px;">Horizontal alignment选项:<span style="color:#3366ff;">center|</span><span style="color:#3366ff;">start|</span><span style="color:#3366ff;">end|</span><span style="color:#3366ff;">left|</span><span style="color:#3366ff;">right</span></span><br /> <span style="font-family:comic sans ms,sans-serif;font-size:16px;">例：context.textAlign = "center";</span></p> <p><span style="font-family:comic sans ms,sans-serif;font-size:16px;">Vertical alignment选项：<span style="color:#3366ff;">top|</span><span style="color:#3366ff;">hanging|</span><span style="color:#3366ff;">middle|</span><span style="color:#3366ff;">alphabetic|</span><span style="color:#3366ff;">ideographic|</span><span style="color:#3366ff;">bottom</span></span><br /> <span style="font-family:comic sans ms,sans-serif;font-size:16px;">例：context.textBaseline = "top";</span></p> <p><span style="font-family:comic sans ms,sans-serif;font-size:16px;">当我们把一段文本渲染在canvas上时，文本本身显示在画布上，会占据一个矩形块（看不见的矩形，我们暂且称其为IBox(invisible bounding box)）； </span></p> <p><span style="font-family:comic sans ms,sans-serif;font-size:16px;">这里提到的对齐方式，都是针些这个文本所占据的这个IBox来操作的（<span style="font-family:comic sans ms,sans-serif;">IBox有，上，下，左，右四条边线）；</span></span></p> <p><span style="font-family:comic sans ms,sans-serif;font-size:16px;">把字符串“HA”在画布的中心点位置(两条黑色直线相交点为中心)；textAlign为默认值，应用不同的textBaseline所产生的效果如下图：</span></p> <p><span style="font-size:16px;"><img style="width:701px;height:490px;" alt="利用html5 canvas对text文本进行渲染;" src="https://simg.open-open.com/show/40e2a01979be05041bad90c200adba2d.png" /></span></p> <p> </p> <p><span style="font-family:comic sans ms,sans-serif;font-size:16px;"><span style="font-family:comic sans ms,sans-serif;">把字符串“HA”在画布的中心点位置(两条黑色直线相交点为中心)；textBaseline为默认值，应用不同的textAlign所产生的效果如下图：</span></span></p> <p><span style="font-size:16px;"><img style="width:688px;height:225px;" alt="利用html5 canvas对text文本进行渲染;" src="https://simg.open-open.com/show/eeaff2f845292e73e27525453f84fd4d.png" /></span></p> <p><span style="font-family:comic sans ms,sans-serif;font-size:16px;"><span style="font-family:comic sans ms,sans-serif;">大家可以细细品味一下，它们的区别……</span></span></p> <p> </p> <p><span style="font-family:comic sans ms,sans-serif;font-size:16px;">实例：<br /> </span><span style="font-family:comic sans ms,sans-serif;font-size:16px;">基本属性展示：</span></p> <pre class="brush:html; toolbar: true; auto-links: false;"><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>test</title> <script type="text/javascript" src="modernizr-latest.js"></script> <script type="text/javascript"> window.addEventListener("load", eventWindowLoaded, false); function eventWindowLoaded() { canvasApp(); } function canvasSupport() { return Modernizr.canvas; } function eventWindowLoaded() { canvasApp(); } function canvasApp() { var message = "your text"; var fillOrStroke = "fill"; var fontSize = "50"; var fontFace = "serif"; var textFillColor = "#ff0000"; var textBaseline = "middle"; var textAlign = "center"; var fontWeight = "normal"; var fontStyle = "normal"; if(!canvasSupport()) { return; } var theCanvas = document.getElementById("canvasOne"); var context = theCanvas.getContext("2d"); var formElement = document.getElementById("textBox"); formElement.addEventListener('keyup', textBoxChanged, false); formElement = document.getElementById("fillOrStroke"); formElement.addEventListener('change', fillOrStrokeChanged, false); formElement = document.getElementById("textSize"); formElement.addEventListener('change', textSizeChanged, false); formElement = document.getElementById("textFillColor"); formElement.addEventListener('change', textFillColorChanged, false); formElement = document.getElementById("textFont"); formElement.addEventListener('change', textFontChanged, false); formElement = document.getElementById("textBaseline"); formElement.addEventListener('change', textBaselineChanged, false); formElement = document.getElementById("textAlign"); formElement.addEventListener('change', textAlignChanged, false); formElement = document.getElementById("fontWeight"); formElement.addEventListener('change', fontWeightChanged, false); formElement = document.getElementById("fontStyle"); formElement.addEventListener('change', fontStyleChanged, false); drawScreen(); function drawScreen() { context.fillStyle = "yellow"; context.fillRect(0, 0, theCanvas.width, theCanvas.height); context.lineWidth = 1; context.beginPath(); context.moveTo(theCanvas.width / 2, 0); context.lineTo(theCanvas.width / 2, theCanvas.height); context.stroke(); context.closePath(); context.beginPath(); context.moveTo(0, theCanvas.height/2); context.lineTo(theCanvas.width, theCanvas.height/2); context.stroke(); context.closePath(); //Text context.textBaseline = textBaseline; context.textAlign = textAlign; context.font = fontWeight + " " + fontStyle + " " + fontSize + "px " + fontFace; var xPosition = (theCanvas.width / 2); var yPosition = (theCanvas.height / 2); switch(fillOrStroke) { case "fill": context.fillStyle = textFillColor; context.fillText(message, xPosition, yPosition); break; case "stroke": context.strokeStyle = textFillColor; context.strokeText(message, xPosition, yPosition); break; case "both": context.fillStyle = textFillColor; context.fillText(message, xPosition, yPosition); context.strokeStyle = "#000000"; context.strokeText(message, xPosition, yPosition); break; } } function textBoxChanged(e) { var target = e.target; message = target.value; drawScreen(); } function fillOrStrokeChanged(e) { var target = e.target; fillOrStroke = target.value; drawScreen(); } function textSizeChanged(e) { var target = e.target; fontSize = target.value; drawScreen(); } function textFillColorChanged(e) { var target = e.target; textFillColor = "#" + target.value; drawScreen(); } function textFontChanged(e) { var target = e.target; fontFace = target.value; drawScreen(); } function textBaselineChanged(e) { var target = e.target; textBaseline = target.value; drawScreen(); } function textAlignChanged(e) { var target = e.target; textAlign = target.value; drawScreen(); } function fontWeightChanged(e) { var target = e.target; fontWeight = target.value; drawScreen(); } function fontStyleChanged(e) { var target = e.target; fontStyle = target.value; drawScreen(); } } </script> </head> <body> <div style="position: absolute; top: 50px; left: 50px;"> <canvas id="canvasOne" width="400" height="150"> Your browser does not support HTML5 Canvas. </canvas> <form> <span>Text</span> <input id="textBox"/> <br/> <span>Fill or Stroke</span> <select id="fillOrStroke"> <option value="fill">fill</option> <option value="stroke">stroke</option> <option value="both">both</option> </select> <br/> <span>Font</span> <select id="textFont"> <option value="serif">serif</option> <option value="sans-serif">sans-serif</option> <option value="cursive">cursive</option> <option value="fantasy">fantasy</option> <option value="monospace">monospace</option> </select> <br/> <span>font size</span> <input type="range" id="textSize" min="0" max="200" value="30"/> <br/> <span>font color</span> <input class="color" id="textFillColor" value="FF0000"/> <br/> <span>font weight</span> <select id="fontWeight"> <option value="normal">normal</option> <option value="bold">bold</option> <option value="bolder">bolder</option> <option value="lighter">lighter</option> </select> <br/> <span>font style</span> <select id="fontStyle"> <option value="normal">normal</option> <option value="italic">italic</option> <option value="oblique">oblique</option> </select> <br/> <span>textBaseLine</span> <select id="textBaseline"> <option value="middle">middle</option> <option value="top">top</option> <option value="hanging">hanging</option> <option value="alphabetic">alphabetic</option> <option value="ideographic">ideographic</option> <option value="bottom">bottom</option> </select> <br/> <span>TextAlign</span> <select id="textAlign"> <option value="center">center</option> <option value="start">start</option> <option value="end">end</option> <option value="left">left</option> <option value="right">right</option> </select> </form> </div> </body> </html></pre> <span style="font-family:comic sans ms,sans-serif;font-size:16px;">阴影效果： <pre class="brush:javascript; toolbar: true; auto-links: false;">function drawScreen() { context.fillStyle = "yellow"; context.fillRect(0, 0, theCanvas.width, theCanvas.height); //Text context.textBaseline = textBaseline; context.textAlign = textAlign; context.shadowColor = "#707070"; context.shadowOffsetX = 5; context.shadowOffsetY = 5; context.shadowBlur = 5; context.font = fontWeight + " " + fontStyle + " " + fontSize + "px " + fontFace; var xPosition = (theCanvas.width / 2); var yPosition = (theCanvas.height / 2); context.fillStyle = textFillColor; context.fillText(message, xPosition, yPosition); }</pre></span> <span style="font-family:comic sans ms,sans-serif;font-size:16px;">渐变效果：<pre class="brush:javascript; toolbar: true; auto-links: false;">function drawScreen() { context.fillStyle = "yellow"; context.fillRect(0, 0, theCanvas.width, theCanvas.height); var gradient = context.createLinearGradient(0, 0, theCanvas.width, 0); context.font = "italic bold 40px serif"; gradient.addColorStop(0, "#000000"); gradient.addColorStop(.5, "#FF0000"); gradient.addColorStop(1, "#00ff00"); var xPosition = (theCanvas.width / 2); var yPosition = (theCanvas.height / 2); context.fillStyle = gradient; context.fillText("message", xPosition, yPosition); }</pre>转自：<a href="/misc/goto?guid=4959517380024479110" target="_blank">http://www.cnblogs.com/amtf/archive/2012/01/18/2324343.html</a></span> <p></p>