एचटीएमएल 5 कैनवास तत्व

के साथ आयताकार ग्रेडियेंट मैं एचटीएमएल 5 कैनवास तत्व का उपयोग करके नीचे चित्रित एक ग्रेडिएंट प्रभाव के साथ एक आयत कैसे आकर्षित कर सकता हूं?एचटीएमएल 5 कैनवास तत्व

sample

संपादित करें: सभी प्रतिक्रिया के लिए धन्यवाद। हां, मैंने पहले से ही कई तरीकों की कोशिश की है। उदाहरण के लिए, क्या मैं createRadialGradient विधि का उपयोग कर सकता हूं जैसे @ लोकर ने सुझाव दिया है? यहां कुछ नमूना कोड है:

<html> 
    <head> 
    <title>test</title> 
     <script type="application/x-javascript"> 
     function draw() { 
      var canvas = document.getElementById("canvas"), 
      ctx = canvas.getContext("2d"); 

      var grad1 = ctx.createRadialGradient(50, 50, 0, 50, 50, 50); 
      grad1.addColorStop(0, 'rgba(255, 252, 0, 1)'); 
      grad1.addColorStop(1, 'rgba(68, 205, 37, 1)'); 

      ctx.fillStyle = grad1; 
      ctx.fillRect(0, 0, 100, 100); 
     } 
    </script> 
    </head> 
    <body onload="draw();"> 
    <div> 
     <canvas id="canvas" width="100" height="100"></canvas> 
    </div> 
    </body> 
</html>

लेकिन परिणाम काफी नहीं है जो मैं चाहता:

result

यह GDI + द्वारा प्रदान की PathGradientBrush की तरह एक विधि के साथ आसानी से किया जाना चाहिए। मुझे यकीन नहीं है कि यह HTML5 कैनवास तत्व के साथ संभव है।

स्रोत

2011-08-11 dreamsfrag

आपने अभी तक क्या प्रयास किया है? अनुलेख https://developer.mozilla.org/en/Canvas_tutorial%3aApplying_styles_and_colors 5 मिनट और आप इसे करने में सक्षम होंगे! – stecb

हे एचडी लगभग 5 मिनट। मेरा डरावना प्रयास है, इसे उत्तर के रूप में पोस्ट करने के लिए भी नहीं जा रहा है http://jsfiddle.net/loktar/MAjPQ/1/ – Loktar

obv '5 mins' का अर्थ है कि उस दस्तावेज़ को पढ़ना आसान है और आसानी से समाधान प्राप्त करने का प्रयास करें :) – stecb

आप रैखिक ढाल और क्लिपिंग के संयोजन का उपयोग करने का प्रयास कर सकते हैं। Demo। कोड:

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

var outerColor = 'rgba(68,205,37,1)'; 
var innerColor = 'rgba(255,252,0,1)'; 

var w = 200; 
var h = 50; 
canvas.width = w; 
canvas.height = h; 

function gradient(dir) { 
    var grad = ctx.createLinearGradient(dir[0], dir[1], dir[2], dir[3]); 

    grad.addColorStop(0, outerColor); 
    grad.addColorStop(0.5, innerColor); 
    grad.addColorStop(1.0, outerColor); 

    return grad; 
} 

// idea: render background gradient and a clipped "bow" 
function background() { 
    ctx.fillStyle = gradient([0, 0, 0, h]); 
    ctx.fillRect(0, 0, w, h); 
} 

function bow() { 
    ctx.save(); 

    ctx.beginPath(); 
    ctx.moveTo(0, 0); 
    ctx.lineTo(w, h); 
    ctx.lineTo(w, 0); 
    ctx.lineTo(0, h); 
    ctx.clip(); 

    ctx.fillStyle = gradient([0, 0, w, 0]); 
    ctx.fillRect(0, 0, w, h); 

    ctx.restore(); 
} 

background(); 
bow();

स्रोत

2011-08-24 18:43:56

बहुत बहुत धन्यवाद !!! – dreamsfrag

एचटीएमएल 5 कैनवास तत्व

उत्तर

संबंधित मुद्दे