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

这篇文章发布于 2011年05月17日,星期二,17:13,归类于 Canvas相关。 阅读 85131 次, 今日 3 次 19 条评论

 

一、前面的碎碎叨

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:因为雪花是白色的,浏览器背景一般都是白色,所以直接在浏览器中看只有白花花的一片,建议右键 – [目标|链接]另存为查看。

(本篇完)

分享到:


发表评论(目前19 条评论)

  1. jeffliu说道:

    您好,请问canvas 怎么创建无限大的画布?

  2. 旭哥小迷弟说道:

    大佬大佬,demo红了红了。我是你的小迷弟。

  3. 路人甲说道:

    雪花的效果报错,连你的demo都报错,怎么回事

  4. 新人说道:

    直接死掉了,主机在叫

  5. vbyzc说道:

    不过好像没什么用

  6. jean说道:

    求JS代码

  7. declong说道:

    很强,很卡,,,,,,,

  8. OneDou说道:

    实在是漂亮啊!

  9. Jivin说道:

    捧个场!

  10. 直觉说道:

    3D卡的要命……

  11. MoLice说道:

    看了那个雪花,太炫了~

  12. ch说道:

    确实变慢了