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条评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code