本文介绍了如何利用HTML5的Canvas标签制作文字碎片动画。通过Canvas的getImageData方法获取文字像素信息，创建动画效果，详细展示了动画的实现过程和关键代码。
Canvas标签应该很多人都有用过，它表示一个 HTML 画布元素 -<canvas>。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。
你可以直接在该对象上指定宽度和高度，但是，其大多数功能都可以通过CanvasRenderingContext2D 对象获得。这是通过 Canvas 对象的getContext() 方法并且把直接量字符串 "2d" 作为唯一的参数传递给它而获得的。
最近在研究canvas在图像像素数据操作方面的常用接口，做了个文字碎片动画效果：
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body>
<div style="width:200px;height:200px;border:1px solid #000;margin:10px auto;">
<canvas width='200' height='200' id="canvasBox"></canvas>
</div>
<script><
最低0.47元/天 解锁文章
835
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
