10

基于canvas画布的两个炫酷效果展示

 4 years ago
source link: https://www.zhangxinxu.com/wordpress/2011/05/%e5%9f%ba%e4%ba%8ecanvas%e7%94%bb%e5%b8%83%e7%9a%84%e4%b8%a4%e4%b8%aa%e7%82%ab%e9%85%b7%e6%95%88%e6%9e%9c%e5%b1%95%e7%a4%ba/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=1630

一、前面的碎碎叨

HTML5 canvas这个玩意用通俗的话来讲就是一块用来画画的布，不过这不是普通的布，这是个类似于神笔马良的那个神笔一样神奇的东西，可以画出很多精湛美妙的东西。本文就展示两个基于canvas的炫酷效果，可以让我们对canvas的潜力有个比较直观的认识。

二、canvas下的3D雪花飞舞效果

您可以狠狠地点击这里：canvas下的3D雪花飞舞demo

下图为demo页面的效果截图：

canvas下雪花3D飞舞效果截图 张鑫旭-鑫空间-鑫生活

如果您使用的是具有考古价值的浏览器，可以从下面的视频中一窥大致效果：

使用
要实现该效果很简单，直接加载一个JS文件就可以了，类似下面：

<script src="http://www.zhangxinxu.com/study/js/effect/smoke.js"></script>

然后相关的CSS代码如下：

body { background-color: #cad5eb; }
canvas { position: fixed; top: 0px; z-index: 2;}

三、canvas下炫酷烟雾线条笔刷效果

您可以狠狠地点击这里：canvas下炫酷烟雾线条笔刷demo

鼠标在页面上随便晃荡几下就可以看到效果了哈：如烟如雾，轻盈飘渺的线条滑出优美的舞姿紧随鼠标之后。

canvas下飘渺画布效果截图 张鑫旭-鑫空间-鑫生活

或者圈一下鄙人的名字（IE9下）：

canvas下的烟画布效果 张鑫旭-鑫空间-鑫生活

使用
使用很简单，页面上嵌入下面这点JS就可以了：

<script src="http://www.zhangxinxu.com/study/js/effect/harmony.js"></script>
<script>harmony();</script>

然后相关的CSS代码如下：

body { background-color: #cad5eb; }
canvas { cursor:crosshair; position: fixed; top: 0px; z-index: 2;}

四、就这么完了

好了，就这些。本文内容很少，纯粹展示。哦，对了，无论是上面的雪花飞，还是下面的线条绘，只要浏览器支持canvas，你都可以以图片的形式保存下来的说~~

canvas绘制的图形可以保存下来 张鑫旭-鑫空间-鑫生活

例如后面这个链接地址对应的图片就是右键保存canvas所得到的图片：canvas.png。
//zxx:因为雪花是白色的，浏览器背景一般都是白色，所以直接在浏览器中看只有白花花的一片，建议右键 – [目标|链接]另存为查看。

（本篇完）1f44d.svg 是不是学到了很多？可以分享到微信！
1f44a.svg 有话要说？点击这里。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK