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

HTML5 Canvas एलिमेंट से इमेज को नीचे के केंद्र कोण से कैसे घुमाएं?

नीचे-केंद्र से रोटेशन

इमेज डायमेंशन को 32, 120 पर ट्रांसलेट करें:

context.translate(32, 120);

अब Canvas घुमाएं:

context.rotate(90 * Math.PI/180);

अब इमेज ड्रॉ करें:

context.drawImage(img, -32, -120, 64, 120);

यह ट्रांसफॉर्मेशन मूल बिंदु को इमेज के नीचे-केंद्र पर ले जाता है, घुमाता है, फिर ड्रॉ करने के लिए नकारात्मक ऑफसेट द्वारा वापस ड्रॉ करता है।

  1. JavaScript का उपयोग करके कैनवास पर ड्रॉ कैसे करें? JavaScript का उपयोग करके कैनवास पर ड्रॉ कैसे करें?

    HTML कैनवास पर ड्रॉइंग JavaScript के साथ की जानी है। कैनवास पर ड्रॉ करने से पहले HTML DOM मेथड getElementById() और getContext() का उपयोग करें। उसके लिए, कुछ चरणों का पालन करें: कैनवास एलिमेंट खोजने के लिए getElementById() मेथड का उपयोग करें। getContext() का उपयोग करें, जो कैनवास के लिए ड्रॉइंग ऑब्

  1. CSS से एडिटेबल एलिमेंट का बॉर्डर कैसे हटाएं? CSS से एडिटेबल एलिमेंट का बॉर्डर कैसे हटाएं?

    एडिटेबल एलिमेंट से बॉर्डर हटाने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <head> <style>    body{       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    }    p{       font-size:

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

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