首页 > 下载 > 下载详文:Html 5文字效果显示

Html 5文字效果显示

发布时间:2011年04月23日 13时42分42秒   属性:程序Web开发 > Javascript/Html    访问次数:7587
字体: 初始 添加收藏 分享给好友
Html 5文字效果显示

在Html 5中的font可以实现复杂的文字效果,不再是简单文字色彩和加粗斜体定义效果,Html5的fillText文字可以实现图片填充文字、曲线排列文字和渐变填充文字等效果,这些效果以前需要在图像设计软件通过图像编辑才能完成,   在本文将展示Html5的文字效果。

示例一fillStyle和StrokeStyle

Html5 canvas中呈现文字,填充文字色彩和文字边框。在本示例中第一步,先获取电脑当前时间,然后在canvas的fillText填充所获取的时间,font文字大小30pt,字体为“Arial”。fillStyle文字填充底色为“"#78A8FF”,strokeStyle文字边框色“blue”,lineWidth文字边框线为1.5。下面是代码

HTML 代码  复制
<script type="text/javascript"> var timeType = ""; var d = new Date(); var timeYear = d.getFullYear(); var timeMouth = d.getMonth()+1; var timeHour = d.getHours(); var timeSec = d.getSeconds(); var timeMin = d.getMinutes(); //var timeMsec = d.getMilliseconds(); if (timeHour < 12) { timeType = "AM"; } else { timeType = "PM"; } if (timeHour == 0) { timeHour = 12; } if (timeHour > 12) { timeHour = timeHour - 12; } var thisTime = timeYear + '' + timeMouth + '' + timeHour + ' : ' + timeMin + ' : ' + timeSec + ' ' + timeType; /////文字Html5 window.onload = function () { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var x = 26; var y = 70; context.font = "30pt Arial"; //文在大小字体,font size, font-family context.fillStyle = "#78A8FF"; // 填充色彩, fill color context.fillText(thisTime, x, y);//文字内容,位置 context.lineWidth = 1.5; context.strokeStyle = "blue"; // 文字轮廓 stroke color context.strokeText(thisTime, x, y); } </script> <body> <canvas id="myCanvas" width="500" height="120"
style=" border:solid #930 1px"></canvas> </body>

(示例一效果)

示例二 文字图片填充 createPattern

在本示中将用图片填充文字的底色,fillStyle文字底色填充createPattern(image, 'repeat')指定背景图片填充,repeat为平铺,和Css背景图片属性类同,repeat为垂直水平循环平铺,repeat-x为水平方向循环平铺,repeat-y为垂直方向循环平铺,no-repeat没有重复;font设置为“bold 35pt 黑体” 即加粗、文字大小35pt和字体为黑体。

HTML 代码  复制
<script type="text/javascript"> function drawPatternText(canvasObj, image) { var canvas = document.getElementById(canvasObj); var context = canvas.getContext('2d'); var text = 'abc中文繁体'; //repeat平铺图片指定文字图片 context.fillStyle = context.createPattern(image, 'repeat'); context.font = "bold 35pt 黑体"; context.fillText(text, 10, 50); context.lineWidth = 0.5; context.strokeStyle = "red"; context.strokeText(text, 10, 50); } </script> <body> <canvas id="patternCanvas" width="300" height="142" style=" border:solid #930 1px; background-color:#000"></canvas> <img id="myImage" src="DSCF8461200.jpg" onload="javascript:drawPatternText('patternCanvas', this);"/> </body>

(示例二效果)

示例三文字拾取路径mozTextAlongPath

示例三将呈现文字拾取圆弧,按圆弧路径排列文字,文字内容和示例一同样说去当前日期时间,拾取圆弧路径通过mozTextAlongPath来完成,其它文字属性和前两个示例相同,不过mozTextAlongPath目前仅对FireFox支持。

HTML 代码  复制
<script type="text/javascript"> function myTime() { var timeType = ""; var d = new Date(); var timeYear = d.getFullYear(); var timeMouth = d.getMonth() + 1; var timeDay = d.getDate(); var timeHour = d.getHours(); var timeSec = d.getSeconds(); var timeMin = d.getMinutes(); if (timeHour < 12) { timeType = "AM"; } else { timeType = "PM"; } if (timeHour == 0) { timeHour = 12; } if (timeHour > 12) { timeHour = timeHour - 12; } var thisTime = timeYear + '' + timeMouth + '' + timeDay + '' + timeHour + ' : ' + timeMin + ' : ' + timeSec + ' ' + timeType; return thisTime;//返回当前时间 thisTime } function TextPathCircle(canvasObj) { var text = myTime(); var canvas = document.getElementById(canvasObj); var context = canvas.getContext('2d'); context.fillStyle = "#78A8FF"; context.beginPath();//圆弧 context.arc(200, 140, 100, 0, Math.PI * 2.1, false); context.stroke(); context.font = "30pt Arial"; context.mozTextAlongPath(text, false); context.closePath(); } </script> <body onload="TextPathCircle('canvas2')"> <canvas id="canvas2" width="380" height="300" style="border:solid #930 1px; background-color:#333" ></canvas> </body>

(示例三效果)

免费
Html 5文字效果显示 (18)
本下载连接不支持第三下载工具打开,请直接点击下载即可
遺昕 | Weisim3.com 下载许可条款 ( 您必须接受同意才可下载 ) .
×
帐号登入 - 遺昕 | Weisim3.com
用 户 名:
用户密码:
注册用户   忘记密码  帮助

登录 Weisim3.com

享受 网络 无纸化 学习

伴随着您成长 伴随着您进步