2011-02-02 17 views
6

में परिपत्र छवि काट लें मैं एचटीएमएल 5 कैनवास का उपयोग कर रहा हूं, और मैं एक गेम बना रहा हूं, यह गेम में अपना चेहरा अपलोड करना संभव है, और इसे मुख्य गुणक के रूप में उपयोग करना संभव है। दुर्भाग्य से, खेल में गुणक गोलाकार चेहरे की तरह परिपत्र हैं।कैनवास

तो यह कैसे किया जाएगा?

क्या कोई तस्वीर लेना संभव है, और इसमें से एक सर्कल काट लें, तो सर्कल के बाहर कुछ भी पारदर्शी होगा? यदि हां, तो यह कैसे किया जाएगा?

उत्तर

6

आप एक क्लिपिंग पथ बनाना चाहते हैं। इस पथ एक चक्र के बाहर सब कुछ क्लिप होगा:

ctx.save(); 

ctx.beginPath(); 
ctx.arc(75, 75, 10, 0, Math.PI*2, true); 
ctx.closePath(); 
ctx.clip(); 

// draw the image 

ctx.restore(); 

तो अगली बात (रों) आप इस कैनवास पर आकर्षित केवल कतरन पथ के अंदर दिखाई देगा।

आप पहले और बाद में संदर्भ को सहेजना और पुनर्स्थापित करना चाहते हैं।

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing#Clipping_paths

:

यहाँ एक सा विषय पर अधिक है