में डबल लाइन स्ट्रोक मैं एचटीएमएल 5 कैनवास पथ का उपयोग करके एक डबल लाइन सीमा बनाना चाहता हूं। डिफ़ॉल्ट स्ट्रोक (context.stroke()) में एक पंक्ति प्रकार का पथ होता है। मैं एक आकृति उत्पन्न करने के लिए एक मूल आकार के अंदर एक समान आकार खींच सकता हूं जो दो सीमा रेखाओं से बना एक जैसा दिखता है, लेकिन मुझे किसी प्रकार का सामान्य समाधान चाहिए। कोई विचार?एचटीएमएल 5 कैनवास
ऐसा करने के कई तरीके हैं। एक आसान तरीका एक मोटी रेखा खींचना और इसके बीच में "कट आउट" करना होगा, जिससे दो छोटे स्ट्रोक निकल जाएंगे। और फिर कम मोटाई के साथ और globalCompositeOperation है कि एक ही कैनवास पर destination-out करने के लिए सेट के साथ एक ही मार्ग बनाना - एक में स्मृति, अस्थायी कैनवास पर -
आप क्या करना चाहते क्या पथ के किसी भी प्रकार आकर्षित है।
इससे आपको वह आकार मिल जाएगा जो आप चाहते हैं, अनिवार्य रूप से 2 लाइनें उनके बीच पारदर्शिता के साथ।
फिर आप उस कैनवास को वास्तविक कैनवास पर खींचते हैं जिसमें उस पर कुछ भी है (जटिल पृष्ठभूमि, आदि)।
बहुत अच्छा विचार है:
यहाँ एक उदाहरण है! मैं एक बार ड्राइंग का सुझाव देना चाहता था और थोड़ा सा आकार बदलना चाहता था, लेकिन इससे धुंधला हो जाएगा। आपका समाधान कुरकुरा लाइन बनाता है। मुझे लगता है कि कोई बेहतर तरीका नहीं है। – naugtur