[HTML5]Google 首页的电吉他解密 raquo;_R维生活_钱柜亚洲真钱老虎机_金鼎娱乐app网址

当前位置:主页 > R维生活 >[HTML5]Google 首页的电吉他解密 raquo; >

[HTML5]Google 首页的电吉他解密 raquo;

2020-05-24

浏览量:121

点赞:301

[HTML5]Google 首页的电吉他解密 raquo;
,Google为了庆祝电吉他之父Les Paul的生日,特地把招牌Google改编成电子吉他。是的,这次的Google Doodle是一把可以互动、可以弹奏的数位电吉他,相信许多人对于这样的创意表现都为之讚歎,究竟是怎幺做的呢?

根据Google官方部落格显示,这把数位电吉他是使用JavaScript, HTML5 的Canvas , CSS, Flash以及Google以开发过的api套件,可以说是使用了非常新颖的技术,但是由于有用到Flash技术,所以很遗憾的,iPhone、iPad或iPod Touch使用者只能观看无法弹奏,但是我相信有电脑的网友们今天应该都有玩一下,这样的互动也不知不觉变成Google独特的特色了。

如果想玩一下这把电吉他并且弹出一些什幺东西,这里提供几个我看到网友分享的乐谱,请开起键盘模式照着按,相信你会弹的更愉快:

两只老虎

TYUT UIO UIO OPOIUT OPOIUT UWT UWT

有只小绵羊

9878999888999987899988987

小蜜蜂

533 422 1234555 533 422 13553 2222234 3333345 533 422 13551

沧海一声笑(笑傲江湖)

POUYT UYTEW WEWETYUOP PPOUYTY

隐形的翅膀

358787 6568321 11186532122 358787 6568321 1118653211

好了,相信各位玩过之后应该有部份的朋友,对于这样的技术还是非常有兴趣的,虽然个人知道的有限,刚好这几天我在练HTML5的Canvas,所以就我所知的稍微解说一下,如果有错误也欢迎各位指证一下

[HTML5]Google 首页的电吉他解密 raquo;

首先来说说这把电吉他的视觉画面组成部份,全只电吉他是採用css sprites技术。如上图所示,电吉他的零件解析出来就是这样,你可以点击这里观看Google的线上图片部份。

css sprites技术其实就是指把原本零零散散的图片集合成一张,可以有效减少Http Request次数,简单来说就是可以更快的开起网页。经过实验证明,使用css sprites技术不但有效减少Http Request还可以减少整体图片档案大小,对于流量的节约是非常有帮助的,使用时搭配css的background可达最大效益。

说完了吉他的外观再来说说吉他弦这些线的部份,线的部份就是使用HTML5的Canvas技术,使用HTML5的Canvas需要搭配Javascript才能正确绘製出所需的线段或是图案,所以整体来说包括线条的粗细、颜色,甚至弹的动态效果应该都是HTML5的Canvas技术的表现,之后如果有时间我会在针对HTML5的Canvas的部份在做深入的介绍。

最后就是整把数位电吉他的精髓,也就是电吉他的声音部份,这部份次採用flash技术来播放音效,这个flash除了感应拨弦的位置并播放声音以外,应该是没有其他功效,也因为没有其他功效,所以整个flash看起来空空如也,完全想不到这个家伙会是整把数位电吉他的灵魂所在,真正表现出看不见的灵魂这个精髓。

以上就是今天Google Doodle涂鸦部份的解说,离今天结束还有半小时,各位观众赶快走开,记得回来,好好珍惜你跟这把电吉他宝贵的相处时光吧!

补充:Google Doodle – Google 涂鸦博物馆

文章出处 草监影像私人频道

[HTML5]Google 首页的电吉他解密 raquo;诚挚邀请你成为好朋友

相关阅读