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

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
踩
分享到：
| 炒股亏损的原因及应对
评论
发表评论

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

相关推荐

    HTML5 Canvas透明丝带飘动背景动画特效

    在这个特定的案例中，“HTML5 Canvas透明丝带飘动背景动画特效”是一个利用Canvas API实现的优雅视觉效果，它通过流动的线条来模拟丝带在空中飘动的情景，为网站增添了一种动态且梦幻的氛围。 首先，让我们深入了解...

    html5 canvas文字放射发光动画特效

    总的来说，“html5 canvas文字放射发光动画特效”是一个展示Canvas API功能和潜力的优秀实例，它结合了文字渲染、颜色处理、动画控制等多方面的知识，对于学习和提升HTML5 Canvas技能非常有帮助。通过深入理解并实践...

    html5 canvas闪电绘制文字动画特效

    在这个“html5 canvas闪电绘制文字动画特效”中，我们看到的是一个创新的应用，它将Canvas与JavaScript结合起来，创建了一个炫酷的文字动画效果。这个特效的核心在于利用Canvas API来模拟闪电划过并揭示文字的过程。...

    html5 canvas酷炫3D文字变换动画特效

    在“html5 canvas酷炫3D文字变换动画特效”这个主题中，我们将深入探讨如何利用Canvas API创建引人注目的3D文字动画效果。 1. **HTML5 Canvas基础** - HTML5 Canvas是一个基于矢量图形的画布，通过JavaScript来...

    HTML5 Canvas火花燃烧文字动画特效.zip

    在这个“HTML5 Canvas火花燃烧文字动画特效”中，我们将探讨如何利用Canvas和相关的JavaScript库，如jQuery，来创建这种引人注目的动画。 首先，`index.html`是项目的入口文件，它包含了HTML结构，包括`&lt;canvas&gt;`...

    HTML5 Canvas表白爱心动画特效.zip

    在“HTML5 Canvas表白爱心动画特效”这个项目中，开发者利用Canvas API创建了一种浪漫且酷炫的动画效果，非常适合情人节等特殊场合用来表达情感。 首先，Canvas API是HTML5引入的一个重要特性，它提供了一个2D渲染...

    HTML5 canvas实现火焰文字动画效果代码.zip

    这个压缩包“HTML5 canvas实现火焰文字动画效果代码.zip”显然是一个包含示例代码的资源，用于展示如何利用HTML5的canvas API创建火焰文字动画效果。这种效果通常用于吸引用户的注意力或者作为网页设计中的动态元素...

    HTML5 Canvas逼真烟雾消散文字动画特效

    "HTML5 Canvas逼真烟雾消散文字动画特效"是一个利用Canvas API实现的创新性视觉效果，它将文字与烟雾动画完美结合，为网页增添了一种动态的艺术气息。 在Canvas中，烟雾效果通常是通过创建粒子系统来模拟的。粒子...

    HTML5 Canvas实现弹性文字动画效果源码.zip

    这个“HTML5 Canvas实现弹性文字动画效果源码.zip”文件包含了一个利用Canvas API来实现弹性文字动画效果的示例代码。 Canvas API是一个基于矢量图形的JavaScript接口，通过它可以动态生成图像、绘制线条、填充形状...

    html5 canvas酷炫LED文字切换动画特效

    这个“html5 canvas酷炫LED文字切换动画特效”利用了Canvas API来实现一种动态、引人注目的LED文字展示效果。下面将详细解释这个特效背后的关键技术和实现步骤。 1. **Canvas API**： HTML5 Canvas 提供了一组...

    HTML5Canvas雪花动画特效代码

    这款"HTML5 Canvas雪花动画特效代码"正是利用了这一特性，为用户创造出一个逼真的雪花飘落场景，增添了动态视觉效果，常用于网站背景或者节日主题设计。 在HTML5中，`&lt;canvas&gt;`元素是一个矩形区域，我们可以在这个...

    html5文字特效canvas画图文字粒子动画效果代码

    本教程将深入探讨如何使用HTML5 Canvas实现文字特效，特别是粒子动画效果。 首先，我们要理解Canvas的基本用法。Canvas是一个矩形区域，可以通过JavaScript的`&lt;canvas&gt;`元素的`getContext('2d')`方法获取2D渲染上...

    HTML5 Canvas粒子流动爱心形状动画特效

    在这个“HTML5 Canvas粒子流动爱心形状动画特效”中，我们主要探讨的是如何利用Canvas API来构建粒子系统，并实现动态的、流动的爱心形状动画。 首先，Canvas API是HTML5引入的一个特性，它提供了一个2D渲染上下文...

    HTML5 Canvas 3D球形文字标签云动画

    在本案例中，“HTML5 Canvas 3D球形文字标签云动画”是指使用HTML5 Canvas技术创建的3D效果，将文字以标签云的形式呈现在一个球体表面上，并且这些文字标签还具有动态动画效果。 3D渲染在Canvas中主要通过WebGL实现...

    HTML5 canvas火焰文字动画效果代码.zip

    这个“HTML5 canvas火焰文字动画效果代码”是一个利用canvas实现的创新性示例，展示了如何使用JavaScript来创建动态、引人注目的视觉效果。 在HTML5中，canvas是一个画布，通过JavaScript的API可以在这个画布上进行...

    HTML5 Canvas火焰文字动画特效.zip

    这个“HTML5 Canvas火焰文字动画特效”压缩包文件提供了一个使用Canvas API实现的创新视觉效果，即火焰燃烧的文字动画。在本文中，我们将深入探讨HTML5 Canvas的基础知识，以及如何创建类似的火焰文字动画特效。 ...

    HTML5 Canvas文字粒子动画 可自定义文字内容

    在这个场景中，"HTML5 Canvas文字粒子动画"是指利用Canvas API创建的一种视觉效果，其中文字由无数微小的粒子组成，这些粒子动态地移动、变化，形成了一种引人注目的视觉体验。这种动画可以自定义文字内容，使得用户...

    7款酷炫HTML5+Canvas全屏网页背景动画特效

    在本文中，我们将深入探讨这7款利用HTML5 Canvas实现的全屏网页背景动画特效，以及如何利用这些特效提升用户体验。 1. **全屏背景动画的优势** 全屏背景动画能够吸引用户注意力，提升网站的视觉吸引力。它们可以在...

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