Google主页使用的是什么技术（吉他弦）

Question

the Google homepage（2011年6月9日）使用了什么技术？他们为这些网罗做了一些吉他拾音器。当你将鼠标移到它上面时，网罗正在播放。

我知道这不是闪光灯，否则Firefox的附加功能会阻止它。

谢谢。

Answer 1

他们使用canvas

<canvas width="474" height="175"></canvas>

和flash

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="0" height="0" id="guitar11-sound-player" type="application/x-shockwave-flash"><param name="movie" value="/logos/swf/guitar11.swf"><param name="allowScriptAccess" value="always"><object id="guitar11-sound-player-2" type="application/x-shockwave-flash" data="/logos/swf/guitar11.swf" width="0" height="0"><param name="allowScriptAccess" value="always"></object></object>

闪光灯的声音。

这里的的JavaScript：

(function() { 
    var g = null, 
     h; 
    try { 
     if (!google.doodle) google.doodle = {}; 
     var i, m, n, o, r, s, t, u, v, aa, w, ba, ca, da = navigator.userAgent.indexOf("MSIE") >= 0, 
      ea = [[3, "#776a62", "#2063ff", 2, [[28, 23], [103, 23]]], [5, "#776a62", "#f61b33", 2, [[28, 38], [103, 38]]], [0, "#776a62", "#ffdd24", 2, [[65, 67], [318, 67]]], [2, "#776a62", "#07d238", 2, [[28, 81], [281, 81]]], [7, "#776a62", "#2063ff", 1, [[28, 96.5], [281, 96.5]]], [9, "#776a62", "#f61b33", 1, [[29, 111.5], [104, 111.5]]], [1, "#776a62", "#07d238", 2, [[358, 66], [433, 66]]], [4, "#776a62", "#2063ff", 2, [[358, 81], [433, 81]]], [6, "#776a62", "#f61b33", 2, [[330, 96], [405, 96]]], [8, "#776a62", "#ffdd24", 1, [[358, 111.5], [434, 111.5]]]], 
      fa = 0, 
      ga = 0, 
      x = 0, 
      y = 0, 
      z = !0, 
      A = [], 
      B = g, 
      C = g, 
      D = function(a) { 
       a && a.parentNode && a.parentNode.removeChild(a) 
      }, 
      E = function(a, b, c) { 
       if (a) { 
        if (!google.doodle.ba) google.doodle.ba = []; 
        google.doodle.ba.push(arguments); 
        var d = a, 
         e = b, 
         f = c; 
        d.addEventListener ? d.addEventListener(e, f, !1) : d.attachEvent("on" + e, f) 
       } 
      }, 
      ... // A lot more [link](http://jsfiddle.net/2R4Cg/) 

他们也有一些CSS：

#hplogo:active,#hplogo:focus { 
    outline:none; 
} 

#hplogo-g { 
    background:url(logos/2011/guitar11-hp-sprite.png) no-repeat 0 0; 
    height:175px; 
    position:relative; 
    width:474px; 
} 

#hplogo-click { 
    background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -2000px -2000px; 
    cursor:pointer; 
    height:130px; 
    left:0; 
    position:absolute; 
    top:0; 
    width:474px; 
} 

#hplogo-lcd { 
    height:30px; 
    left:70px; 
    position:absolute; 
    top:129px; 
    width:200px; 
} 

#hplogo-lcd-icon { 
    background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -580px -162px; 
    cursor:pointer; 
    height:0; 
    position:absolute; 
    width:0; 
} 

#hplogo-lcd-text { 
    background:transparent; 
    border:0 none; 
    color:#666; 
    cursor:text; 
    font-family:VT323,arial,sans-serif; 
    font-size:14px; 
    left:77px; 
    position:absolute; 
    top:134px; 
    text-decoration:none; 
    width:182px; 
} 

#hplogo-lcd-screen { 
    background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -2000px -2000px; 
    height:20px; 
    left:52px; 
    position:absolute; 
    top:134px; 
    width:214px; 
} 

#hplogo-on { 
    background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -809px -39px; 
    height:37px; 
    left:272px; 
    position:absolute; 
    top:123px; 
    width:62px; 
} 

#hplogo-led { 
    background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -2000px -2000px; 
    height:21px; 
    left:292px; 
    position:absolute; 
    top:133px; 
    width:21px; 
} 

.hplogo-str { 
    background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -530px -60px; 
    height:20px; 
    position:absolute; 
    width:255px; 
} 

#hplogot { 
    -webkit-box-shadow:5px 5px 10px #ddd; 
    -moz-box-shadow:5px 5px 10px #ddd; 
    box-shadow:5px 5px 10px #ddd; 
    -webkit-transition:opacity .5s ease-out; 
    -moz-transition:opacity .5s ease-out; 
    -o-transition:opacity .5s ease-out; 
    transition:opacity .5s ease-out; 
    -webkit-user-select:none; 
    -moz-user-select:none; 
    user-select:none; 
    background-color:#ffffca; 
    border:1px solid #b5b5b5; 
    cursor:pointer; 
    display:none; 
    font:normal 9pt arial,sans-serif; 
    left:128px; 
    opacity:0; 
    position:absolute; 
    top:16px; 
    white-space:nowrap; 
    padding:2px 3px; 
} 

注

#hplogo-click { 
    background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -2000px -2000px; 
} 

和<div id="hplogo-click" onclick="google.doodle.go();"></div>其中包含实际吉他的形象。

Answer 2

这是HTML5画布，SVG和JavaScript的组合。正如其他人所指出的，Flash用于音频。

Answer 3

可能是HTML5？如果您在Google Chrome中检查元素，则会显示一个画布元素。

Answer 4

http://googleblog.blogspot.com/2011/06/doodle-for-instrumental-inventor.html

“如果你好奇，涂鸦是用JavaScript，HTML5 Canvas的组合制成（在现代浏览器用来绘制吉他弦），CSS，闪光灯（声音）和工具，如Google Font API，goo.gl和App Engine。“