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

HTML5 Canvas旋转文本动画

阅读更多
点这里可以看动画效果:
http://www.108js.com/article/article3/zip1/text.html

效果图:


代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>旋转文本</title>
</head>
<body>
<canvas id="canvas" width="600" height="300"></canvas>
<script>
var canvas = document.getElementById("canvas");  
      var context = canvas.getContext('2d');  
      var Width=canvas.width;
      var Height=canvas.height;
      var  s = "HTML 5 旋转";
      context.font="lighter 1.5em palatino";
      var colors = ["orange","blue","red"];
 
      function drawText(s,x,y){  
        context.save();   
        //   旋转文本
       for (var i = 0; i < 12; i++) {
         context.rotate(30 * Math.PI / 180);
         context.strokeStyle=colors[i % 3];
         context.strokeText(s, 0, 0);
       }
       context.restore();
     }
 
     var angle=0;
     var loop = setInterval(function () {   
        context.clearRect(0, 0, canvas.width, canvas.height);  
         context.save();
        // 平移原点到图形环境的中心
        context.translate(Width/2,Height/2);
        context.rotate(angle * Math.PI / 180);
        drawText(s,Width/2,Height/2,angle);
        context.restore();
        angle = (angle + 10) % 360;   
   }, 500);   

</script>
  </body>
  </html>

热情奉献:HTML5 Canvas绘图与动画学习59例源码:
http://www.108js.com/example.html
  • 大小: 5 KB
0
0
分享到:
评论

相关推荐

    HTML5 Canvas全屏背景动画特效

    1. Canvas元素:HTML5引入的Canvas是一个二维绘图区域,通过JavaScript API提供了一系列方法,如`fillRect()`, `strokeRect()`, `beginPath()`, `moveTo()`, `lineTo()`等,用于绘制图形、线条、文本等。 2. 绘图上...

    HTML5 canvas 3D文字云动画

    在这个"HTML5 canvas 3D文字云动画"项目中,开发者利用canvas结合JavaScript实现了引人注目的视觉效果。Modernizr2.6.2是一个JavaScript库,用于检测浏览器对HTML5和CSS3新特性的支持情况,确保在不同的浏览器环境下...

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

    5. **文本动画效果** - 文字可以逐字符出现、消失、旋转或变形,创造出各种酷炫效果。 - 利用时间函数和缓动效果可以使动画更流畅,如线性、二次、三次贝塞尔曲线等。 - 通过改变颜色、透明度、大小等属性,可以...

    HTML5 Canvas核心技术—图形、动画与游戏开发一书源代码

    HTML5 Canvas是Web开发中的一个关键技术,它提供了一个在网页上绘制图形的API,使得开发者可以直接在浏览器中创建丰富的交互式2D图形、动画以及游戏。"HTML5 Canvas核心技术—图形、动画与游戏开发"这本书深入浅出地...

    html5 canvas文字标签云3D旋转动画特效.zip

    `html5 canvas文字标签云3D旋转动画特效.png`是一个截图,展示了这个特效在浏览器中的实际效果,而`php中文网免费下载站.txt`可能是提供下载信息或版权说明的文本文件。 总的来说,这个项目展示了一个HTML5 Canvas...

    html5 canvas实现旋转的心

    "html5 canvas实现旋转的心"这个主题,显然是关于如何使用Canvas API来绘制并动态旋转一个心形图案。这篇博客文章(博文链接:https://wjlgryx.iteye.com/blog/972463)可能会详细讲解这个过程。 首先,我们需要...

    HTML5 Canvas核心技术 图形、动画与游戏开发.pdf

    这本书——"HTML5 Canvas核心技术 图形、动画与游戏开发"深入探讨了Canvas API,揭示了如何利用这个技术来构建引人入胜的图形、流畅的动画以及互动游戏。 1. **Canvas基础** - Canvas是一个基于矢量图形的画布元素...

    《HTML5 Canvas核心技术图形动画与游戏开发》高清中文 + 源码

    HTML5 Canvas是现代Web开发中的一个关键特性,它允许开发者在网页上绘制2D图形,创建复杂的动画效果以及构建互动式游戏。这本书《HTML5 Canvas核心技术图形动画与游戏开发》全面探讨了Canvas API的各个方面,旨在...

    HTML5 Canvas 动画时钟

    在这个"HTML5 Canvas 动画时钟"的主题中,我们将深入探讨如何利用Canvas API创建一个实时更新的、美观的数字或指针式时钟。 首先,Canvas API 提供了 `canvas` 元素,它是一个矩形区域,可以通过 JavaScript 来绘制...

    精选105款神奇的html5 canvas 核心技术图形、动画与游戏开发完整源码

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上绘制图形、创建动画以及构建交互式游戏。这个压缩包包含105个不同类型的Canvas应用实例,涵盖了核心技术、图形设计、动态效果以及游戏开发等多个方面。...

    html5 canvas酷炫的3D球形文字云动画特效

    在这个“html5 canvas酷炫的3D球形文字云动画特效”中,我们将深入探讨如何利用Canvas实现一个引人注目的3D效果。 1. **HTML5 Canvas基础**: - `canvas`元素:HTML5中新增的标签,用于定义图形画布。 - `...

    html5 canvas核心技术图形、动画与游戏开发完整源码

    HTML5 Canvas是Web开发中的一个关键技术,它提供了一个在网页上绘制图形的API,使得开发者可以直接在浏览器上创建丰富的交互式2D图形、动画以及游戏。这个“html5 canvas核心技术图形、动画与游戏开发完整源码”正是...

    使用HTML5 Canvas绘制 3D房间模型和人物动画特效

    在"使用HTML5 Canvas绘制3D房间模型和人物动画特效"这个主题中,我们将深入探讨如何利用Canvas技术构建逼真的3D环境,并实现动态的人物动画。 一、HTML5 Canvas基础 HTML5 Canvas是一个基于矢量图形的画布元素,...

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

    HTML5 Canvas是一个强大的图形绘制工具,它允许开发者在网页上直接用JavaScript绘制图像,包括复杂的动画效果。在本文中,我们将深入探讨如何利用HTML5 Canvas创建一个可自定义文字内容的文字粒子动画,以及相关的...

    HTML5 Canvas核心技术代码

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式用户体验。Canvas API提供了大量的方法和属性,使得JavaScript可以直接控制像素级别的图像操作。这个压缩包...

    HTML5 Canvas粒子漩涡动画特效.zip

    HTML5 Canvas是现代网页开发中的一个关键特性,它允许开发者在网页上进行动态图形绘制,提供了丰富的绘图API,使得创建交互式和动画效果成为可能。在这个“HTML5 Canvas粒子漩涡动画特效”中,我们将深入探讨如何...

    html5 canvas可拖放互动的照片墙插件

    HTML5 Canvas是HTML5标准中的一个关键特性,它为网页提供了在浏览器中绘制图形的能力,类似于画布。这款“html5 canvas可拖放互动的照片墙插件”利用了Canvas的强大功能,创建了一个允许用户交互的动态照片展示平台...

    HTML5 canvas绘制的ascii码表文字3D旋转动画特效源码.zip

    "HTML5 canvas绘制的ascii码表文字3D旋转动画特效源码.zip"这个压缩包文件显然包含了利用HTML5 canvas进行ASCII艺术文字的3D旋转动画效果的实现代码。 在HTML5中,canvas是一个矩形区域,开发者可以通过JavaScript...

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

    这个“HTML5 canvas火焰文字动画效果代码”压缩包显然是一个包含JavaScript实现的火焰文字动画示例。在网页设计中,这种特效能够吸引用户的注意力,增加互动性,并为网站或应用增添独特的视觉魅力。 HTML5 canvas的...

Global site tag (gtag.js) - Google Analytics