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

क्या HTML5 कैनवास और पॉलीगॉन पर इमेज संभव है?


हाँ, यह संभव है। इमेज का उपयोग करके एक पैटर्न बनाएं, और फिर पैटर्न को fillStyle पर सेट करें।

यहां, obj हमारा इमेज ऑब्जेक्ट है:

var context = canvas.getContext("2d"); var pattern = context.createPattern(obj, "repeat"); context.fillStyle = pattern;

आपको इमेज को मनमाने पॉलीगॉन में फिट करने के लिए हेरफेर करना होगा:

context.save(); context.setTransform(m11, m12, m21, m22, dx, dy); context.drawImage(obj); context.restore();

  1. HTML5 में drawImage() मेथड से इमेज कैसे ड्रॉ करें? HTML5 में drawImage() मेथड से इमेज कैसे ड्रॉ करें?

    Canvas drawImage() मेथड HTML5 Canvas API का drawImage() मेथड इमेज, कैनवास या वीडियो को कैनवास पर ड्रॉ करता है। इमेज के भाग भी ड्रॉ कर सकते हैं और आकार बदल सकते हैं। पैरामीटर्स: क्र.सं.पैरामीटर और विवरण 1img - इमेज, कैनवास या वीडियो एलिमेंट 2sx - क्लिपिंग शुरू करने का X निर्देशांक (वैकल्पिक) 3sy

  1. - HTML5 कैनवास और JS लाइब्रेरी में सेलेक्ट/ड्रैग-एंड-ड्रॉप फीचर

    यदि आप HTML5 कैनवास का उपयोग आकृतियाँ, टेक्स्ट और कर्व्स ड्रॉ करने के लिए करना चाहते हैं और साथ ही पारंपरिक DOM इवेंट्स जैसे onClick या ड्रैग एंड ड्रॉप फ़ंक्शन अटैच करना चाहते हैं, तो ड्रैग एंड ड्रॉप या टच इवेंट करने के लिए एक क्रॉसबार फ्रेमवर्क Raphael का उपयोग किया जाता है। यह तकनीक पुराने IE संस

  1. - HTML5 कैनवास के साथ पैटर्न बनाएं

    HTML5 कैनवास के साथ पैटर्न बनाने के लिए निम्नलिखित मेथड का उपयोग करें: createPattern(image, repetition) − यह मेथड पैटर्न बनाने के लिए एक इमेज का उपयोग करेगा। दूसरा आर्गुमेंट निम्नलिखित मानों में से एक के साथ एक स्ट्रिंग हो सकता है: repeat, repeat-x, repeat-y, और no-repeat। यदि खाली स्ट्रिंग या null