HTML5生成畫布背景圖像

我有這個圖像，我在Photoshop中，我想用一種方式來重新創建它使用HTML5畫布，以便JavaScript創建相同的圖像（或類似）..它會使頁面加載速度更快，因爲沒有圖像也必須下載。HTML5生成畫布背景圖像

這是一個非常簡單的圖像。三種不同的顏色模糊或作爲漸變放置（我不知道該怎麼做），然後從底部淡出到60px之後變成透明的白色漸變。我已經看到使用canvas元素實現了許多令人難以置信的事情，並且每次都是相同的圖像，並且沒有動畫。另外我希望它在窗口調整大小時自動縮放。

有沒有人知道如何創建這樣的東西？

enter image description here

來源

2013-03-31 Dimser

只讀HTML5畫布函數drawImage（）和createLinearGradient（）並創建一些東西..然後，如果您發現任何問題，那麼只需在SO處提問即可。 –

只需注意一點，通過適當的緩存，您可以消除第一次後圖像的下載時間。另外，根據尺寸的不同，您可以使其變亮。 –

@MadaraUchiha :)謝謝..我知道那..我只想讓客戶端（瀏覽器）儘可能多地工作，因爲它會使瀏覽體驗更加流暢和更好。 – Dimser

從這裏開始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);

，只要你想你可以添加儘可能多的層。只需添加另一個;

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

..其中#是您層（新的電話號碼讓他們以正確的順序得到壽。你甚至可以去儘量使用JavaScript正確的結果剛開始用空#wrapper和只需填寫它動態地用canvas -incremented的ID，然後綁定完整的繪圖程序到它。給你超級乾淨的代碼，同時保持對內容的控制。

玩弄放射狀物的座標和大小，它很快就會適應就像你想要的一樣，我會把剩下的創意留給你;）

來源

2013-03-31 13:58:07

這真的讓我感謝。 :)雖然我有一件事..我認爲這與我的形象相比有點黑暗..我可以做些什麼來使它更輕？認爲這是由透明度造成的，但我不知道.. http://jsfiddle.net/5pR46/3/ – Dimser

我發現了謝謝。 :)爲避免黑暗，請將結束顏色設置爲與開始顏色相同，並僅更改不透明度。這樣，它不會變黑。看到這個小提琴。 http://jsfiddle.net/5pR46/4/ – Dimser

爲什麼不把帆布合併在一起？ – r043v

你也可以嘗試與老同學的方法做到這一點： - ）

使用算法來生成的顏色陣列的粉紅色gradent

爲例：

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; 
    }

，並使用一些代碼來提取各個顏色R，G，b來填充畫布與它

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++; 
}

撥弄：http://jsfiddle.net/r043v/FTuPC/9/

來源

2013-03-31 14:20:00 r043v

更新的代碼> http://jsfiddle.net/FTuPC/12/ – r043v

HTML5生成畫布背景圖像

回答

相關問題