canvas下炫酷烟雾线条笔刷效果–基于harmony

偶然间发现的一个很好玩的小东西，harmony英文意思为和谐，和睦，融洽。在这里我不知道该怎么称呼此js应用。但是我不得不赞叹这个强大的应用。
此应用采用的是html5的canvas标签，查看效果请采用能兼容html5的浏览器。ie6神马的就不要考虑了，来看w3school关于canvas的说明：

HTML5 的canvas元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

原文地址在这里：My harmonious background canvas

演示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>canvas下炫酷烟雾线条笔刷效果</title>
<meta name="description" content="canvas下炫酷烟雾线条笔刷效果"/>
<meta name="keywords" content="神爱, 龙语视觉, web前端, html5, canvas, demo页面"/>
<meta name="author" content="神爱"/>
<style>
body{ background-color: #cad5eb; }
canvas { cursor:crosshair; position: fixed; top: 0px; z-index: 2;}
</style>
</head>
<body>
<script src="http://longsays.b0.upaiyun.com/js/harmony.js"></script>
<script>harmony();</script>
</body>
</html>

鼠标在页面上随便晃荡几下就可以看到效果了哈：如烟如雾，轻盈飘渺的线条滑出优美的舞姿紧随鼠标之后。
使用
使用很简单，页面上嵌入下面这点JS就可以了：(推荐下载js后使用)

然后相关的CSS代码如下：
body { background-color: #cad5eb; } canvas { cursor:crosshair; position: fixed; top: 0px; z-index: 2;}
好了，就这些。本文内容很少，纯粹展示。
另外本人还发现一种类似的效果，采用html5制作叫做 many lines ,有种群魔乱舞的感觉呵呵
演示地址：http://open.adaptedstudio.com/html5/many-lines/
下载地址：http://open.adaptedstudio.com/html5/many-lines/many-lines.zip

《canvas下炫酷烟雾线条笔刷效果–基于harmony》上有16条评论

《canvas下炫酷烟雾线条笔刷效果–基于harmony》上有16条评论

发表回复 取消回复

发表回复取消回复