HTML5 中的 canvas 标签实现动画效果

来源：互联网发布：可变数据印刷优缺点编辑：程序博客网时间：2024/05/17 03:33

看到一个兼容IE、FF的倒影效果，IE下自然是用滤镜实现了，FF下一看用的歌叫做canvas的标签，canvas倒是是什么东东呢？

地址 http://cow.neondragon.net/index.php/category/reflection

<canvas> 是一个新的 HTML 元素，这个元素在 HTML5 中被定义。这个元素通常可以被用来在 HTML 页面中通过 JavaScript 进行绘制图形、合成图像等等操作，也可以用来做一些动画。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><mce:style></mce:style><style mce_bogus="1">canvas {border:1px solid gray}</style></head><body><canvas id="canvas" width="300" height="200"></canvas></body></html>

<mce:script type="text/javascript"></mce:script>

上面的代码FF、Chrome中有效，ie下需要加入一个excanvas.js，用VML来模拟实现。

补充资料：

HTML5 Canvas 基本语法

HTML5 中的 canvas 标签 实现动画效果

HTML5 中的 canvas 标签实现动画效果