एचटीएमएल 5 कैनवास पृष्ठभूमि छवि उत्पन्न करता है

Question

मेरे पास यह छवि है जिसे मैंने फ़ोटोशॉप में बनाया है, और मैं इसे HTML5 कैनवास का उपयोग करके इसे फिर से बनाने का एक तरीका चाहूंगा, ताकि जावास्क्रिप्ट एक ही छवि (या समान) बना रहा हो .. यह पृष्ठ बना देगा तेजी से लोड हो रहा है, क्योंकि कोई छवि भी डाउनलोड नहीं की जानी चाहिए।

यह एक बहुत ही सरल छवि है। त्रिभुज के रूप में धुंधला या रखा गया तीन अलग-अलग रंग (मुझे नहीं पता कि यह कैसे करना है) और उसके बाद 60px के बाद नीचे से नीचे एक सफेद ढाल पारदर्शी हो सकता है। मैंने कैनवास तत्व का उपयोग करके संभवतः कई अविश्वसनीय चीजें देखी हैं, और यह हर बार एक ही छवि है, और बिना किसी एनिमेशन के। खिड़की का आकार बदलते समय भी मैं इसे स्वचालित रूप से स्केल करना चाहता हूं।

क्या कोई इस तरह कुछ बनाने के बारे में जानता है?

Answer 1

यहाँ http://jsfiddle.net/5pR46/1/ प्रारंभ:

सीएसएस

#wrapper canvas { 
    position: relative; 
} 

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

एचटीएमएल

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

जावास्क्रिप्ट

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> 

.. जहां # अपने परत (के नए नंबर उन्हें यद्यपि। तुम भी जहाँ तक जावास्क्रिप्ट के साथ जा सकते हैं सही परिणाम प्राप्त करने के सही क्रम में रखने के रूप में सिर्फ एक खाली #wrapper के साथ शुरू और बस को भरने यह canvas -incremented आईडी के साथ गतिशील और फिर इसे करने के लिए पूर्ण ड्राइंग प्रक्रिया बाध्यकारी। आप सुपर साफ कोड देते सामग्री पर नियंत्रण बनाए रखते हुए।

निर्देशांक और रेडियल के आकार को आजमाते और यह जल्द ही फिट करेंगे जैसा कि आप चाहते हैं उतना ही पर्याप्त है। मैं आपको बाकी रचनात्मकता छोड़ दूंगा;)

Answer 2

तुम भी पुराने स्कूल विधि के साथ यह करने की कोशिश कर सकते हैं: -)

एक कलन विधि का उपयोग रंग सरणी एक गुलाबी 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; 
    } 

और निकालने के लिए कुछ कोड का उपयोग प्रत्येक रंग आर, जी, बी कैनवास इसके साथ भरने के लिए

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/