Какая технология используется на главной странице Google (гитарные строки)

Ответ 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>, которые содержат фактическое изображение гитары.

Ответ 2

Это сочетание HTML5 Canvas, SVG и JavaScript. Как отмечали другие, Flash для аудио.

Ответ 3

Возможно, HTML5? Если вы проверяете элемент в Google Chrome, есть элемент canvas.

Ответ 4

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

"Если вам любопытно, каракули были сделаны с использованием JavaScript, HTML5 Canvas (используется в современных браузерах для рисования гитарных струн), CSS, Flash (для звука) и инструментов, таких как API шрифтов Google, goo.gl и App Engine."