html5 canvas中支持对text文本进行渲染;
直接的理解就是把text绘制在画布上,并像图形一样处理它(可以加shadow、gradient、pattern、color fill等等);
既然它的本质是文字,就会具有文字所特有的一些属性;本篇的侧重点也在于此;
不过,在最后会增加一些图形填充效果在text上应用的实例;
context.font:
[font style] [font weight] [font size] [font face]
字体属性的设置与css中的类似;
例:
context.font = "italic bold 24px serif"; context.font = "normal lighter 50px cursive";
context.measureText(message):
当我们提供一个文本message,调用此方法,
它会依据当前context设置的字体、大小等,返回一个文本的度量信息对象TextMetrics;
当前html5 canvas中TextMetrics对象,仅包含一个属性,就是width;
可以用来确定当前给定字符串文本的在当前环境下的宽度;
例如:
var metrics = context.measureText(message); var textWidth = metrics.width;
fillText([text],[x],[y],[maxWidth]):
参数的意义:
text:要在canvas上要渲染的文本内容;
x,y:代表开始渲染的点的位置坐标;
maxWidth:代表最大宽度;
与之搭配的设置文本的颜色属性:fillStyle
strokeText([text],[x],[y],[maxWidth]):
参数的意义与fillText相同;与fillText相比,它指渲染文字的轮廓;
与之搭配的设置文本的颜色属性:strokeStyle
Canvas中有对文本对齐方式的支持,包括两个选项:水平Horizontal alignment与竖直Vertical alignment;
context.textAlign:文字水平对齐方式。可取属性值: start, end, left,right, center。默认值:start.
context.textBaseline:文字竖直对齐方式。可取属性值:top, hanging, middle,alphabetic, ideographic, bottom。默认值:alphabetic.
Horizontal alignment选项:center|start|end|left|right
例:context.textAlign = "center";
Vertical alignment选项:top|hanging|middle|alphabetic|ideographic|bottom
例:context.textBaseline = "top";
当我们把一段文本渲染在canvas上时,文本本身显示在画布上,会占据一个矩形块(看不见的矩形,我们暂且称其为IBox(invisible bounding box));
这里提到的对齐方式,都是针些这个文本所占据的这个IBox来操作的(IBox有,上,下,左,右四条边线);
把字符串“HA”在画布的中心点位置(两条黑色直线相交点为中心);textAlign为默认值,应用不同的textBaseline所产生的效果如下图:
把字符串“HA”在画布的中心点位置(两条黑色直线相交点为中心);textBaseline为默认值,应用不同的textAlign所产生的效果如下图:
大家可以细细品味一下,它们的区别……
实例:
基本属性展示:
<!DOCTYPE html> <html> <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 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>
阴影效果:
代换上面代码的drawScreen方法体 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); }
渐变效果:
代换View Code 代码段中的drawScreen方法 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); }
以上是Html5 Canvas中支持对text文本进行渲染的示例代码(图)的详细内容。更多信息请关注PHP中文网其他相关文章!

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5通过语义化元素和ARIA属性提升网页的可访问性和SEO效果。1.使用、、等元素组织内容结构,提高SEO。2.ARIA属性如aria-label增强可访问性,辅助技术用户可顺利使用网页。

"h5"和"HTML5"在大多数情况下是相同的,但它们在某些特定场景下可能有不同的含义。1."HTML5"是W3C定义的标准,包含新标签和API。2."h5"通常是HTML5的简称,但在移动开发中可能指基于HTML5的框架。理解这些区别有助于在项目中准确使用这些术语。

H5,即HTML5,是HTML的第五个版本,它为开发者提供了更强大的工具集,使得创建复杂的网页应用变得更加简单。H5的核心功能包括:1)元素允许在网页上绘制图形和动画;2)语义化标签如、等,使网页结构清晰,利于SEO优化;3)新API如GeolocationAPI,支持基于位置的服务;4)跨浏览器兼容性需要通过兼容性测试和Polyfill库来确保。

如何创建 H5 链接?确定链接目标:获取 H5 页面或应用程序的 URL。创建 HTML 锚点:使用 <a> 标记创建锚点并指定链接目标URL。设置链接属性(可选):根据需要设置 target、title 和 onclick 属性。添加到网页:将 HTML 锚点代码添加到希望链接出现的网页中。

解决 H5 兼容问题的方法包括:使用响应式设计,允许网页根据屏幕尺寸调整布局。采用跨浏览器测试工具,在发布前测试兼容性。使用 Polyfill,为旧浏览器提供对新 API 的支持。遵循 Web 标准,使用有效的代码和最佳实践。使用 CSS 预处理器,简化 CSS 代码并提高可读性。优化图像,减小网页大小并加快加载速度。启用 HTTPS,确保网站的安全性。

h5页面可以通过两种方法生成链接:手动创建链接或使用短链接服务。通过手动创建,只需复制h5页面的URL即可;通过短链接服务,需将URL粘贴到服务中,然后获取缩短的URL。

制作引人入胜的 H5 分享页面至关重要,旨在提升参与度、产生潜在客户和增加品牌知名度。步骤包括:确定目标受众、设计引人注目的视觉效果、创建引人入胜的内容、添加互动元素、优化社交媒体分享,以及测试并改进。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

Atom编辑器mac版下载
最流行的的开源编辑器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。

禅工作室 13.0.1
功能强大的PHP集成开发环境

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

SublimeText3汉化版
中文版,非常好用