एचटीएमएल कैनवास - ड्राइंग

Question

आकार बदलने मैं HTML कैनवास तत्व में एक बुनियादी आकार जो ठीक काम करता है बनाया है पर गायब हो जाते हैं।

समस्या है जब मैं कैनवास का आकार बदलने, कैनवास में सभी ड्राइंग गायब हो जाता है तब होता है। क्या यह सामान्य व्यवहार है? या क्या कोई ऐसा कार्य है जिसका उपयोग इसे रोकने के लिए किया जा सकता है?

एक तरीका यह तय करने के लिए कैनवास पर फिर से समारोह ड्राइंग कॉल करने के लिए हो सकता है आकार परिवर्तन हालांकि यह बहुत ही कुशल नहीं हो सकता है अगर वहाँ विशाल सामग्री तैयार किया जा रहा है।

सबसे अच्छा तरीका क्या है?

यहाँ नमूने के लिए कोड https://gist.github.com/2983915

Answer 1

जब आप आकार बदलने के दृश्य पुनः बनाने की जरूरत है आकार परिवर्तन नहीं है।

चौड़ाई या एक कैनवास की ऊंचाई की स्थापना, भले ही आप पहले की तरह ही मान में सेट कर रहे हैं, न केवल कैनवास को साफ करता है लेकिन पूरे कैनवास संदर्भ रीसेट करता है। किसी भी सेट गुण (fillStyle, lineWidth, क्लिपिंग क्षेत्र, आदि) भी रीसेट किया जाएगा।

यदि आपके पास कैनवास का प्रतिनिधित्व करने वाले किसी भी डेटा संरचना से दृश्य को फिर से निकालने की क्षमता नहीं है, तो आप हमेशा पूरे कैनवास को एक इन-मेमोरी कैनवास में खींचकर, मूल चौड़ाई को सेट करके सहेज सकते हैं, और इन-मेमोरी कैनवास को मूल कैनवास पर वापस खींचें।

यहाँ कैनवास बिटमैप बचत और एक आकार बदलने के बाद इसे वापस डालने की एक बहुत जल्दी उदाहरण है:

http://jsfiddle.net/simonsarris/weMbr/

Answer 2

हर आप कैनवास वह खुद को रीसेट कर देगा काले TRANSPARANT को, as defined in the spec का आकार बदलने की कड़ी है।

आप या तो होगा करने के लिए:

• redraw जब आप कैनवास का आकार बदलने, या,
• कैनवास

Answer 3

मैं भी एक प्रयोग के बाद इस problem.but से मुलाकात की, मैंने पाया कि कैनवास तत्व का आकार बदलना होगा स्वचालित रूप से कैनवास से सभी चित्रों को साफ़ करें! बस नीचे दिए गए कोड को

<canvas id = 'canvas'></canvas> 
<script> 
    var canvas1 = document.getElementById('canvas') 
    console.log('canvas size',canvas1.width, canvas1.height) 
    var ctx = canvas1.getContext('2d') 
    ctx.font = 'Bold 48px Arial' 
    var f = ctx.font 
    canvas1.width = 480 
    var f1 = ctx.font 
    alert(f === f1) //false 
</script>