Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> Javascript

HTML5 कैनवास को माउस कर्सर पर ज़ूम करें

<घंटा/>

कैनवास हमेशा अपने वर्तमान मूल से स्केल करता है। डिफ़ॉल्ट मूल [0,0] है। यदि आप किसी अन्य बिंदु से स्केल करना चाहते हैं, तो आप पहले ctx.translate(desiredX,desiredY); कर सकते हैं। यह कैनवास के मूल को [वांछित एक्स, वांछित वाई] पर रीसेट कर देगा।

अनुवाद () विधि कैनवास पर (0,0) स्थिति को रीमैप करती है। स्केल () विधि वर्तमान ड्राइंग को बड़ा या छोटा करती है। यदि आप अपने ऑफ़सेट द्वारा कैनवास संदर्भ का अनुवाद () करना चाहते हैं, तो आपको पहले इसे ज़ूम इन या आउट करने के लिए स्केल () करना होगा, और फिर माउस ऑफ़सेट के विपरीत अनुवाद () करना होगा।

ये चरण निम्नलिखित उदाहरण में दिए गए हैं

ctx.translate(pt.x,pt.y);
ctx.scale(factor,factor);
ctx.translate(-pt.x,-pt.y);

  1. एक HTML5 कैनवास तत्व प्रिंट करें

    HTML5 कैनवास तत्व प्रदर्शित करने के लिए कोड स्निपेट निम्नलिखित है। <a href = "javascript:print_voucher()">PRINT CANVAS</a> function print_canvas() {    $("#canvas_voucher").printElement(); } यहां कैनवास_वाउचर कैनवास तत्व की आईडी है। इसे कार्य करने के लिए हमे

  1. HTML5 कैनवास परिवर्तन

    HTML5 कैनवास ऐसे तरीके प्रदान करता है जो सीधे रूपांतरण मैट्रिक्स में संशोधन की अनुमति देता है। रूपांतरण मैट्रिक्स प्रारंभ में पहचान परिवर्तन होना चाहिए। फिर इसे रूपांतरण विधियों का उपयोग करके समायोजित किया जा सकता है। उदाहरण आइए कैनवास परिवर्तन का एक उदाहरण देखें: function drawShape(){// DOM वर

  1. HTML5 में कैनवास को कैसे केन्द्रित करें?

    HTML 5 में कैनवास को केन्द्रित करने के लिए, कैनवास टैग को div टैग में शामिल करें। तब हम div टैग को केंद्र में संरेखित कर सकते हैं। ऐसा करने से, कैनवास भी मध्य संरेखित होता है। उदाहरण <!DOCTYPE html>. <html>    <body>       <div style = "text-align:c