एचटीएमएल 5

Question

में एक भरे स्ट्रोक की पारदर्शिता मैं HTML5 में एक डूडलिंग ऐप पर काम कर रहा हूं और मैं एक प्रकार की बाल्टी सुविधा करना चाहता हूं। विचार एक रास्ता खींचना है और इसे बंद कर दिया जाएगा और चयनित रंग (स्ट्रोक का रंग) से भरा होगा। यह ठोस रंगों के साथ काफी अच्छी तरह से काम करता है, लेकिन अगर मैं एक पारदर्शी स्ट्रोक और भरना चाहता हूं, तो मैं इस समस्या में भाग लेता हूं: http://imgur.com/0N3MW

स्ट्रोक के बीच तक भरने का क्या होता है (वास्तविक नमूना बिंदु पथ) तो आकार के अंदर स्ट्रोक के आधे आकार की एक रेखा है जो गहरा है क्योंकि यह भरने और स्ट्रोक का चौराहे है।

क्या आप इसके लिए कोई कामकाज देखते हैं?

दुर्भाग्यवश, मैं अभी जेएसफ़िल्ड पर पोस्ट नहीं कर सकता क्योंकि यह केवल पढ़ने के लिए है। लेकिन आप को देखने के लिए क्या मैं इस खिलौने के डिब्बे में के बारे में बात कर रहा हूँ लाइव सक्षम होना चाहिए: http://bit.ly/AbaMLl

कोई भी विचार/लीड (वेबसाइट और पुस्तकालय मैं क्या उपयोग कर रहा हूँ से संबंधित नहीं है, यह सिर्फ एक कैनवास sanbox मैंने पाया है) आपका स्वागत है :)

Answer 1

साइमन के जवाब था उस समय सही है लेकिन अब ऐसा लगता है कि क्रोम 36 ने एक बग को सही किया है जो उसके समाधान को प्रभावित करता है और यह अब काम नहीं करता है। यह पहले से ही फ़ायरफ़ॉक्स पर काम नहीं करता है और यह अपेक्षित व्यवहार प्रतीत होता है: https://bugzilla.mozilla.org/show_bug.cgi?id=898375

तो, आप यह कैसे करते हैं?
आपको पहले एक और कैनवास चाहिए।
अस्पष्टता के बिना इस कैनवास पर अपने भरे और स्ट्रोक किए गए आकार को खींचें (रंग में नहीं और कोई ग्लोबल अल्फा नहीं)।
अब, वैश्विक एल्फा को अपने मुख्य कैनवास पर जो कुछ भी आप चाहते हैं उसे सेट करें।
अपने मुख्य पर पहले कैनवास बनाएं।
ग्लोबल अल्फा को अपने मुख्य कैनवास पर जो कुछ भी था, उसे सेट करें।
हो गया।

Answer 2

निश्चित रूप से, ctx.globalCompositeOperation = 'destination-atop'; का उपयोग करें और इसे जिस तरीके से आप उम्मीद कर रहे हैं उसे देखना चाहिए।

तो जैसा: http://jsfiddle.net/UcyX4/

मानते हुए इसकी न केवल बात कैनवास पर तैयार (क्रम आपको हो रही समस्या को देखने के लिए कि लाइन बाहर ले), तो आप शायद करने के लिए जा रहे हैं इसे एक अस्थायी कैनवास में खींचें और उसके बाद उस कैनवास को अपने सामान्य पर खींचें, अन्यथा यह सभी पहले खींचे गए आकारों को बर्बाद कर सकता है। jsfiddle विफलता के मामले में चिपकाया कोड: http://jsfiddle.net/dATfj/

संपादित करें: तो तुम इतनी तरह एक प्रणाली आवश्यकता होगी

एचटीएमएल:

<canvas id="canvas1" width="500" height="500"></canvas> 

स्क्रिप्ट:

var can = document.getElementById('canvas1'); 
var ctx = can.getContext('2d'); 

var can2 = document.createElement('canvas'); 
can2.width = can.width; 
can2.height = can.height; 
ctx2 = can2.getContext('2d'); 

ctx.strokeStyle = 'rgba(0,0,0,0.7)'; 
ctx.fillStyle = 'rgba(0,0,0,0.7)'; 
ctx.lineWidth = 10; 


// Stuff drawn normally before 
// Here I draw one rect in the old way just to show the old way 
// and show something on the canvas before: 
ctx.beginPath(); 
ctx.rect(50,50,100,100); 
ctx.fill(); 
ctx.stroke(); 


// Draw on can2 then draw can2 to can 
ctx2.strokeStyle = 'rgba(0,0,0,0.7)'; 
ctx2.fillStyle = 'rgba(0,0,0,0.7)'; 
ctx2.lineWidth = 10; 
ctx2.beginPath(); 
ctx2.rect(50,250,100,100); 
ctx2.globalCompositeOperation = 'destination-atop'; 
ctx2.fill(); 
ctx2.stroke(); 

ctx.drawImage(can2, 0, 0);