无论如何从html 5中的文本字母中提取路径,然后沿着该路径获取(x,y)坐标,以便字母可以通过沿着该字母路径的圆圈形成?
我想采用x,y坐标并在其位置应用一个形状,使其类似于"像素化"格式的文本字符串,然后是一些动画效果.
有关在画布上沿着字符路径获取某种x,y坐标的任何建议都会很棒.
编辑:我实际上是在尝试自动生成坐标,以执行与此类似的操作:http://www.html5canvastutorials.com/labs/html5-canvas-google-bouncing-balls/
当我的网页加载时,使用css,我希望文本"widget world"出现在顶部,就好像有人在手动编写它一样; 一次出现一个字母.
我打算用草书字体.每个字母出现之间会有几毫秒的延迟.
我想把每个字母分成一个单独的div然后逐个淡出它们.
我正在为客户建立一个登陆页面,其中心标识位于中间,并在下方直接创建标语 - 但是他们希望将短语设置为动画,以使其看起来好像是手写的.
我一直在努力奋斗几天,并且不知道如何做到这一点 - 如果有人能帮助我,那将是如此的救星!
这是标语上没有动画的基本登录页面:
<div class="image-wrapper">
<a href="home.html">
<img src="http://japesfawcett.com/testsh/images/landing_logo2.png" />
</a>
<div id="test">
<p>enter the sunshine state</p>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
而CSS:
body {
background-color: #000;
}
@font-face {
font-family: segoe;
src: url(fonts/segoesc.ttf);
}
div.image-wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.image-wrapper img {
display: block;
}
#test {
position: absolute;
top: 100%;
width: 100%;
}
#test p {
width: 100%; …Run Code Online (Sandbox Code Playgroud)