`
128kj
  • 浏览: 583803 次
  • 来自: ...
社区版块
存档分类
最新评论

HTML5 Canvas简单透明文字动画

html5htmlJavaScript编程
阅读更多
效果图：


效果链接：
http://www.108js.com/article/canvas/8/demo.html

代码：
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" >your browser does not support the canvas tag </canvas>
<script type="text/javascript">
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext("2d");
  var dx=0;
  //设置字体样式
  ctx.font = "40px Courier New";
  ctx.textBaseline="top"; 
  var metrics = ctx.measureText("Html5Canvas");
  var textWidth = metrics.width;

 
  function drawRect(){
      ctx.lineWidth=3;
      ctx.strokeText("Html5Canvas", 50, 50);
      ctx.lineWidth=1;
      ctx.strokeRect(50,50,textWidth,50);
      ctx.globalAlpha=0.5;
      ctx.fillStyle="green";
      ctx.fillRect(50,50,dx,50);
       dx+=textWidth/10;
      if(dx>=textWidth+textWidth/10) dx=0;
   }
 
  loop = setInterval(function () {
    //beginTag = true;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawRect();
  }, 500);

</script>

</body>
</html>
  • 大小: 2.5 KB
0
顶
0
踩
分享到：
| 炒股亏损的原因及应对
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    vector:基于Canvas实现的炫酷3D动画大背景

    HTML5 中新增标签Canvas，Canvas 对象表示一个 HTML 画布元素 -。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。利用JS，可以实现一些超炫酷的效果。本文所介绍的是基于Canvas实现的炫酷3D动画大...

    从入门到精通HTML5——PDF——网盘链接

    　1.3 HTML的基本结构 5 　1.3.1 HTML文件的编写方法 5 　1.3.2 文件开始标签&lt;html&gt; 7 　1.3.3 文件头部标签&lt;head&gt; 7 　1.3.4 文件标题标签&lt;title&gt; 7 　1.3.5 文件主体标签&lt;body&gt; 7 　1.3.6...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    鉴于市场上用户的手机型号、种类、屏幕分辨率等参差不齐，传统方式根据主流系统分别开发相应的系统耗时又耗力，为了高效开发并节约开发项目成本，本文采用Android+HTML5相结合的方式进行移动端Web系统的设计研发工作...

    WEBGL英文原版教程

    2.3　一个简单的Three.js网页　17 2.4　一个真实的3D示例　20 2.4.1　为场景着色　23 2.4.2　添加纹理映射　24 2.4.3　旋转物体　25 2.4.4　循环重绘和requestAnimationFrame()　25 2.4.5　让页面贴近生活　26 2.5　...

    java编程100例

    实例5 圆形的按钮 实例6 密码验证框 实例7 虚线与实线 实例8 显示多种字体 实例9 多种风格的窗口 实例10右键弹出菜单 实例11 森林状的关系图 实例12 简单的文本编辑器 实例13使用剪贴板的复制粘贴程序 实例14 文本的...

    delphi 开发经验技巧宝典源码

    0006　安装不同类型的第三方组件　5 0007　在Delphi中加载QReport报表组件　7 1.3　创建DLL文件　8 0008　生成一个DLL文件　8 0009　调用DLL文件　8 1.4　窗体相关操作　9 0010　将组件置前/置后　9 0011　如何锁定...

    delphi 开发经验技巧宝典源码06

    0006　安装不同类型的第三方组件　5 0007　在Delphi中加载QReport报表组件　7 1.3　创建DLL文件　8 0008　生成一个DLL文件　8 0009　调用DLL文件　8 1.4　窗体相关操作　9 0010　将组件置前/置后　9 0011　如何锁定...

    android开发实例大全_王东华

    实例082： 在Canvas中写文字 265 实例083： 移动屏幕中的图片 272 实例084：在屏幕中绘制一个三维圆柱体 276 实例085： 获取并显示图片的宽和高 285 实例086： 编写一个手机屏保程序 287 实例087： 以触摸方式移动...

Magicbox
Global site tag (gtag.js) - Google Analytics