HTML5 generowanie obrazu tła na płótnie

Question

Mam to zdjęcie, które zrobiłem w Photoshopie, i chciałbym go odtworzyć za pomocą Canvas HTML5, aby javascript tworzył ten sam obraz (lub podobny). To spowodowałoby, że strona ładowanie jest szybsze, ponieważ nie trzeba pobierać żadnego obrazu.

To całkiem proste zdjęcie. Trzy różne kolory są rozmyte lub umieszczone jako gradienty (nie wiem, jak to zrobić), a następnie biały gradient od dołu do przezroczystego po 60px. Widziałem tak wiele niesamowitych rzeczy, które były możliwe dzięki elementowi canvas, i to jest ten sam obraz za każdym razem i bez animacji. Chciałbym też skalować się automatycznie, gdy zmienia się rozmiar okna.

Czy ktoś wie, jak stworzyć coś takiego?

Answer 1

Zacznij tutaj http://jsfiddle.net/5pR46/1/:

CSS

#wrapper canvas { 
    position: relative; 
} 

#wrapper canvas { 
    border: 1px solid red; 
    position: absolute; 
    background-color: transparent; 
} 

HTML

<div id="wrapper"> 
    <canvas id="myCanvas" width="578" height="200"></canvas> 
    <canvas id="myCanvas2" width="578" height="200"></canvas> 
</div> 

JavaScript

function drawRadial(elemId, startColor, endColor, x0, y0, r0, x1, y1, r1) { 
    var canvas = document.getElementById(elemId); 
    var context = canvas.getContext('2d'); 

    context.rect(0, 0, canvas.width, canvas.height); 

    // create radial gradient 
    var grd = context.createRadialGradient(x0, y0, r0, x1, y1, r1); 
    grd.addColorStop(0, startColor); 
    grd.addColorStop(1, endColor); 

    context.fillStyle = grd; 
    context.fill(); 

    delete canvas; 
    delete context; 
    delete grd; 
} 

drawRadial('myCanvas', 'rgba(248,173,133,1.0)', 'rgba(0,0,0,0.0)', 50, 25, 110, 300, 50, 400); 
drawRadial('myCanvas2', 'rgba(213,215,155,1.0)', 'rgba(0,0,0,0.0)', 500, 150, 110, 500, 50, 600); 

Można dodać dowolną liczbę warstw, jak chcesz. Po prostu dodaj kolejne;

<canvas id="myCanvas#" width="578" height="200"></canvas> 

.. gdzie # jest nowym numerem Twojego warstwy (zachować je w odpowiedniej kolejności, aby uzyskać prawidłowe wyniki Tho. Można nawet iść tak daleko, jak tylko z JavaScript rozpocząć z pustym #wrapper i po prostu wypełnić dynamicznie z canvas - zwiększają identyfikatory, a następnie wiążą z nim pełną procedurę rysowania, zapewniając super czysty kod przy zachowaniu kontroli nad treścią.

Rozejrzyj się ze współrzędnymi i rozmiarami radialnych, które wkrótce zmieszczą się wystarczająco, jak tego chcesz, pozostawiam ci resztę kreatywności;)

Answer 2

można także spróbować zrobić ze starym sposobem szkoły: -)

użyciem algorytmu do generowania tablicy kolorów

exemple na różowym gradientem:

var colors = []; 

for(var x=0;x<width;x++) 
    for(var y=0;y<height;y++) 
    { var red = 0x6b+(x>>2)+(y>>2); if(red>0xff) red = 0xff; 
     colors[y*width+x] = (red<<16)|(0x2b<<8)|0xc6; 
    } 

i użyć kodu, aby wyodrębnić każdego koloru R, g, b, aby wypełnić obszar roboczy z tym

while(i < size){ 
    color = colors[i]; // get color 

    // extract r,g,b ... 
    var r = (color>>16)&255; 
    var g = (color>>8)&255; 
    var b = color&255; 

    // fill buffer with each color part 
    buffer[n++] = r; 
    buffer[n++] = g; 
    buffer[n++] = b; 
    buffer[n++] = 255; // alpha to max 
    i++; 
} 

skrzypacz: http://jsfiddle.net/r043v/FTuPC/9/