php如何令画布透明_9个令人振奋的画布演示

php如何令画布透明

The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that will make your jaw drop!

<canvas>元素对我们队伍中的视觉专家来说是一个启示。 Canvas提供了令人难以置信的高效动画的手段,而且没有Flash的额外好处; 这些开发人员可以转而使用其出色JavaScript技能。 这里有九个令人难以置信的画布演示,它们会让您大跌眼镜!

1.禅光子花园 (1.  Zen Photon Garden)

The Zen Photon Garden demo is the epitome of mind-blowing.  This epic canvas demo allows for drawing on the canvas with reactive light streams, allowing the user to see the end product of their new line will be.  Even better, this demo allows you to save and load output.

Zen Photon Garden演示是令人着迷的缩影。 此史诗般的画布演示允许在画布上使用React性光流进行绘制,从而使用户可以看到其新产品线的最终产品。 更好的是,此演示使您可以保存和加载输出。

Canvas Demo

2.可撕布 (2.  Tear-able Cloth)

The Tear-able Cloth demo has set the web alight over the past few months and for good reason.  This demo is the smoothest you'll see and considering the task it accomplishes and the how little code is involved, it will take your breath away.  There's more to it than simple pulling and physics -- the animation and needing to account for pulling hard enough to elegantly animate a tear makes this demo even more amazing.  A perfect illustration of canvas' capabilities.

在过去的几个月中,有充分的理由使Tear-able Cloth演示使网络焕然一新。 该演示是您最流畅的演示,并考虑了它完成的任务以及所涉及的代码量,将使您叹为观止。 除了简单的拉伸和物理操作外,它还具有其他更多功能-动画以及需要考虑足够用力来优雅地使泪水动起来的动画使此演示更加惊人。 画布功能的完美例证。

Check out this Pen!

3.颗粒 (3.  Particles)

It's hard describe this demo outside of "ftw".  This demo animates color, position, connection lines, and opacity, all the while animating smooth as a baby's....it's really smooth.  Marvel at this beast.

很难在“ ftw”之外描述此演示。 该演示动画了颜色,位置,连接线和不透明度,同时还为婴儿的动画制作了光滑的动画。 惊叹于这只野兽。

Check out this Pen!

4.动态图形字体 (4.  Motion Graphic Typeface)

I wish I could describe how this effect is done but I can't.  I see that each letter is comprised of different image data, but that's about it.  What I can say is this animation is absolutely mind-blowing, as letters animate into place and the aspect at which you see the text depends on your mouse position.  Shocking.

我希望我能描述这种效果是如何实现的,但我不能。 我看到每个字母都包含不同的图像数据,仅此而已。 我能说的是,这种动画绝对让人赞叹不已,因为字母会动画到位,而看到文字的方式取决于鼠标的位置。 令人震惊

Check out this Pen!

5.动态图形字体II (5.  Motion Graphic Typeface II)

As if the first wasn't impressive enough, the second MGT demo is one worthy of a Pulitzer Prize. I'd give up my second, third, and eighth-born to be this clever.  Not only does the text animate but there's an incredible colored blur that's part of the animation.  This demo is truly a sight to behold.

好像第一个MGT演示不够吸引人,第二个MGT演示值得普利策奖。 我会放弃自己的第二,三和八岁才变得如此聪明。 不仅文本会动画,而且动画中还包含令人难以置信的彩色模糊。 这个演示确实是一个值得一看的景象。

Check out this Pen!

6.手势+ Reveal.JS (6.  Gestures + Reveal.JS)

Now only did this demo blow my mind, but it also blew my CPU.  This exercise uses your device's camera and microphone to move a cube of data based on gestures.  If you have a MacBook Pro, you shouldn't die before trying this out.  Start the demo and flail your arms about -- you'll se the demo content move about and then start believing in spirits.

现在,这个演示只是让我大吃一惊,但也炸毁了我的CPU。 此练习使用设备的摄像头和麦克风根据手势移动数据块。 如果您使用的是MacBook Pro,请不要死于尝试。 开始演示并挥动双手-您将看到演示内容在移动,然后开始相信自己的精神。

7.自由骑士2 (7.  Free Rider 2)

You can't cover the awesomeness of canvas without including at least one game.  Canvas is arguably the future of HTML5 gaming, as Firefox OS will soon demonstrate.  This brilliant but simple bike game shows that canvas is ready for prime time!

如果不包括至少一个游戏,就无法涵盖画布的超酷功能。 正如Firefox OS即将展示的那样,Canvas可以说是HTML5游戏的未来。 这款出色而简单的自行车游戏表明,帆布已经为黄金时段做好了准备!

Canvas Demo

8. 30,000个粒子 (8.  30,000 Particles)

The 30k Particles demo incorporates some really awesome stuff:  circular shapes (radius), animated exploding and returning particles, and mouse listeners to allow the user to control the explosions.  An excellent example of interactivity and logic.

30k粒子演示包含了一些非常棒的内容:圆形(半径),动画爆炸和返回粒子以及鼠标侦听器,以允许用户控制爆炸。 交互性和逻辑的一个很好的例子。

Check out this Pen!

9. HTML5视频销毁 (9.  HTML5 Video Destruction)

I must pay homage to one of the first truly eye-catching canvas demos I saw -- an explodable canvas video.  You click the video and pieces explode, yet the video keeps playing its segment/position during the explosion while it returns to its original position.  An inspiring demo to to all of us.

我必须向我看到的第一个真正引人注目的画布演示致敬-可爆炸的画布视频。 您单击视频后,片段会爆炸,但视频在爆炸过程中会继续播放其片段/位置,同时返回到其原始位置。 给我们所有人的鼓舞人心的演示。

Canvas Demo

翻译自: https://davidwalsh.name/canvas-demos

php如何令画布透明

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值