HTML5 tạo ảnh nền canvas

Question

Tôi có hình ảnh này mà tôi đã tạo trong photoshop và tôi muốn tạo lại nó bằng cách sử dụng HTML5 Canvas, để javascript tạo cùng một hình ảnh (hoặc tương tự). Nó sẽ làm cho trang tải nhanh hơn, vì không có hình ảnh nào cũng phải được tải xuống.

Đó là một hình ảnh khá đơn giản. Ba màu khác nhau bị mờ hoặc được đặt làm độ dốc (tôi không biết cách làm) và sau đó một gradient màu trắng từ phía dưới mờ dần đến trong suốt sau khi có thể là 60px. Tôi đã thấy rất nhiều điều tuyệt vời có thể thực hiện bằng cách sử dụng phần tử canvas, và đây là hình ảnh giống nhau mọi lúc, và không có hình động. Ngoài ra, tôi muốn nó tự động mở rộng khi cửa sổ thay đổi kích thước.

Có ai biết cách tạo thứ gì đó như thế này không?

Answer 1

Bắt đầu ở đây 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); 

Bạn có thể thêm bao nhiêu lớp tùy thích. Chỉ cần thêm một cái khác;

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

.. nơi # là số điện thoại mới của lớp của bạn (giữ chúng theo đúng thứ tự để có được kết quả chính xác tho. Bạn thậm chí có thể đi xa với JavaScript như chỉ bắt đầu với một sản phẩm nào #wrapper và chỉ cần điền nó tự động với canvas -incủa ID và sau đó ràng buộc các thủ tục vẽ đầy đủ với nó.Cho bạn mã siêu sạch trong khi duy trì quyền kiểm soát nội dung. đủ như bạn muốn. Tôi sẽ để phần còn lại của sự sáng tạo cho bạn;)

Answer 2

bạn cũng có thể thử làm điều đó với phương pháp học cũ: -)

sử dụng một thuật toán để tạo ra các màu sắc mảng

dụ cho một gradent hồng:

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

và sử dụng một số mã để trích xuất mỗi r màu, g, b để điền vào vải với nó

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

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