点这里可以看动画效果:
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
分享到：
相关推荐
1. Canvas元素：HTML5引入的Canvas是一个二维绘图区域，通过JavaScript API提供了一系列方法，如`fillRect()`, `strokeRect()`, `beginPath()`, `moveTo()`, `lineTo()`等，用于绘制图形、线条、文本等。 2. 绘图上...
在这个"HTML5 canvas 3D文字云动画"项目中，开发者利用canvas结合JavaScript实现了引人注目的视觉效果。Modernizr2.6.2是一个JavaScript库，用于检测浏览器对HTML5和CSS3新特性的支持情况，确保在不同的浏览器环境下...
5. **文本动画效果** - 文字可以逐字符出现、消失、旋转或变形，创造出各种酷炫效果。 - 利用时间函数和缓动效果可以使动画更流畅，如线性、二次、三次贝塞尔曲线等。 - 通过改变颜色、透明度、大小等属性，可以...
HTML5 Canvas是Web开发中的一个关键技术，它提供了一个在网页上绘制图形的API，使得开发者可以直接在浏览器中创建丰富的交互式2D图形、动画以及游戏。"HTML5 Canvas核心技术—图形、动画与游戏开发"这本书深入浅出地...
`html5 canvas文字标签云3D旋转动画特效.png`是一个截图，展示了这个特效在浏览器中的实际效果，而`php中文网免费下载站.txt`可能是提供下载信息或版权说明的文本文件。 总的来说，这个项目展示了一个HTML5 Canvas...
"html5 canvas实现旋转的心"这个主题，显然是关于如何使用Canvas API来绘制并动态旋转一个心形图案。这篇博客文章（博文链接：https://wjlgryx.iteye.com/blog/972463）可能会详细讲解这个过程。 首先，我们需要...
这本书——"HTML5 Canvas核心技术 图形、动画与游戏开发"深入探讨了Canvas API，揭示了如何利用这个技术来构建引人入胜的图形、流畅的动画以及互动游戏。 1. **Canvas基础** - Canvas是一个基于矢量图形的画布元素...
HTML5 Canvas是现代Web开发中的一个关键特性，它允许开发者在网页上绘制2D图形，创建复杂的动画效果以及构建互动式游戏。这本书《HTML5 Canvas核心技术图形动画与游戏开发》全面探讨了Canvas API的各个方面，旨在...
在这个"HTML5 Canvas 动画时钟"的主题中，我们将深入探讨如何利用Canvas API创建一个实时更新的、美观的数字或指针式时钟。 首先，Canvas API 提供了 `canvas` 元素，它是一个矩形区域，可以通过 JavaScript 来绘制...
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上绘制图形、创建动画以及构建交互式游戏。这个压缩包包含105个不同类型的Canvas应用实例，涵盖了核心技术、图形设计、动态效果以及游戏开发等多个方面。...
在这个“html5 canvas酷炫的3D球形文字云动画特效”中，我们将深入探讨如何利用Canvas实现一个引人注目的3D效果。 1. **HTML5 Canvas基础**： - `canvas`元素：HTML5中新增的标签，用于定义图形画布。 - `...
HTML5 Canvas是Web开发中的一个关键技术，它提供了一个在网页上绘制图形的API，使得开发者可以直接在浏览器上创建丰富的交互式2D图形、动画以及游戏。这个“html5 canvas核心技术图形、动画与游戏开发完整源码”正是...
在"使用HTML5 Canvas绘制3D房间模型和人物动画特效"这个主题中，我们将深入探讨如何利用Canvas技术构建逼真的3D环境，并实现动态的人物动画。 一、HTML5 Canvas基础 HTML5 Canvas是一个基于矢量图形的画布元素，...
HTML5 Canvas是一个强大的图形绘制工具，它允许开发者在网页上直接用JavaScript绘制图像，包括复杂的动画效果。在本文中，我们将深入探讨如何利用HTML5 Canvas创建一个可自定义文字内容的文字粒子动画，以及相关的...
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的交互式用户体验。Canvas API提供了大量的方法和属性，使得JavaScript可以直接控制像素级别的图像操作。这个压缩包...
HTML5 Canvas是现代网页开发中的一个关键特性，它允许开发者在网页上进行动态图形绘制，提供了丰富的绘图API，使得创建交互式和动画效果成为可能。在这个“HTML5 Canvas粒子漩涡动画特效”中，我们将深入探讨如何...
HTML5 Canvas是HTML5标准中的一个关键特性，它为网页提供了在浏览器中绘制图形的能力，类似于画布。这款“html5 canvas可拖放互动的照片墙插件”利用了Canvas的强大功能，创建了一个允许用户交互的动态照片展示平台...
"HTML5 canvas绘制的ascii码表文字3D旋转动画特效源码.zip"这个压缩包文件显然包含了利用HTML5 canvas进行ASCII艺术文字的3D旋转动画效果的实现代码。 在HTML5中，canvas是一个矩形区域，开发者可以通过JavaScript...
这个“HTML5 canvas火焰文字动画效果代码”压缩包显然是一个包含JavaScript实现的火焰文字动画示例。在网页设计中，这种特效能够吸引用户的注意力，增加互动性，并为网站或应用增添独特的视觉魅力。 HTML5 canvas的...