点这里可以看动画效果:
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的...