html5-canvas ट्यूटोरियल
एचटीएमएल 5-कैनवास के साथ शुरुआत करना

Android AngularJS Cordova CSS HTML JavaScript jQuery Node.js PHP SVG
खोज…


Html5 Canvas Element को वेबपेज पर कैसे जोड़ें

Html5-Canvas ...

  • एक Html5 तत्व है।
  • अधिकांश आधुनिक ब्राउज़रों (इंटरनेट एक्सप्लोरर 9+) में समर्थित है।
  • एक दृश्य तत्व है जो डिफ़ॉल्ट रूप से पारदर्शी है
  • की डिफ़ॉल्ट चौड़ाई 300px और डिफ़ॉल्ट ऊंचाई 150px है।
  • जावास्क्रिप्ट की आवश्यकता है क्योंकि सभी सामग्री को कैनवस में प्रोग्रामेटिक रूप से जोड़ा जाना चाहिए।

उदाहरण: Html5 मार्कअप और जावास्क्रिप्ट दोनों का उपयोग करके एक Html5-Canvas तत्व बनाएं: 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvasHtml5{border:1px solid red; }
    #canvasJavascript{border:1px solid blue; }
</style>
<script>
window.onload=(function(){

    // add a canvas element using javascript
    var canvas=document.createElement('canvas');
    canvas.id='canvasJavascript'
    document.body.appendChild(canvas);

}); // end $(function(){});
</script>
</head>
<body>

    <!-- add a canvas element using html -->
    <canvas id='canvasHtml5'></canvas>

</body>
</html>

कैनवास का आकार और संकल्प

एक कैनवास का आकार वह क्षेत्र है जो वह पृष्ठ पर रहता है और सीएसएस की चौड़ाई और ऊंचाई के गुणों से परिभाषित होता है। 

canvas {
   width : 1000px;
   height : 1000px;
}

कैनवास का रिज़ॉल्यूशन इसमें शामिल पिक्सेल की संख्या को परिभाषित करता है। संकल्प को कैनवास तत्व की चौड़ाई और ऊंचाई के गुणों को निर्धारित करके निर्धारित किया जाता है। यदि कैनवास को 150 पिक्सेल से 300 तक सीमित नहीं किया गया है।

निम्नलिखित कैनवास उपरोक्त सीएसएस आकार का उपयोग करेगा लेकिन जैसा कि width और height निर्दिष्ट नहीं है संकल्प 150 द्वारा 300 होगा। 

<canvas id="my-canvas"></canvas>

इसके परिणामस्वरूप प्रत्येक पिक्सेल को असमान रूप से बढ़ाया जाएगा। पिक्सेल पहलू 1: 2 है। जब कैनवास बढ़ाया जाता है तो ब्राउज़र बिलिनियर फ़िल्टरिंग का उपयोग करेगा। इससे खिंचे हुए पिक्सेल के धुंधले होने का प्रभाव पड़ता है।

कैनवास का उपयोग करते समय सर्वोत्तम परिणामों के लिए सुनिश्चित करें कि कैनवास रिज़ॉल्यूशन डिस्प्ले आकार से मेल खाता है।

प्रदर्शन आकार से मिलान करने के लिए ऊपर सीएसएस शैली से आगे बढ़ने के बाद कैनवास को उसी पिक्सेल गणना के लिए width और height साथ जोड़ें, जैसा कि शैली परिभाषित करती है। 

<canvas id = "my-canvas" width = "1000" height = "1000"></canvas>

ऑफ स्क्रीन कैनवास

कई बार जब कैनवस के साथ काम करते हैं, तो आपको कुछ इंट्राम पिक्सेल डेटा रखने के लिए एक कैनवास की आवश्यकता होगी। एक ऑफ़स्क्रीन कैनवास बनाना आसान है, 2 डी संदर्भ प्राप्त करें। एक ऑफस्क्रीन कैनवास रेंडर करने के लिए उपलब्ध ग्राफिक्स हार्डवेयर का भी उपयोग करेगा।

निम्न कोड बस एक कैनवास बनाता है और इसे नीले पिक्सेल से भरता है। 

function createCanvas(width, height){
    var canvas = document.createElement("canvas"); // create a canvas element
    canvas.width = width;
    canvas.height = height;
    return canvas;
}

var myCanvas = createCanvas(256,256); // create a small canvas 256 by 256 pixels
var ctx = myCanvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0,0,256,256);

कई बार ऑफस्क्रीन कैनवास का उपयोग कई कार्यों के लिए किया जाएगा, और आपके पास कई कैनवस हो सकते हैं। कैनवास के उपयोग को सरल बनाने के लिए आप कैनवास के संदर्भ को कैनवास से जोड़ सकते हैं। 

function createCanvasCTX(width, height){
    var canvas = document.createElement("canvas"); // create a canvas element
    canvas.width = width;
    canvas.height = height;
    canvas.ctx = canvas.getContext("2d");
    return canvas;
}
var myCanvas = createCanvasCTX(256,256); // create a small canvas 256 by 256 pixels
myCanvas.ctx.fillStyle = "blue";
myCanvas.ctx.fillRect(0,0,256,256);

कैनवास पर माउस की स्थिति का पता लगाना

यह उदाहरण दिखाएगा कि कैनवास के सापेक्ष माउस की स्थिति कैसे प्राप्त करें, जैसे कि (0,0) एचटीएमएल 5 कैनवस के ऊपरी-बाएँ हाथ का कोना होगा। e.clientX और e.clientY को दस्तावेज़ के शीर्ष के सापेक्ष माउस e.clientY मिलेगी, इसे बदलने के लिए कैनवास के शीर्ष पर आधारित होने के लिए हम क्लाइंट X और Y से कैनवास के left और right पदों को घटाते हैं। 

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "16px Arial";

canvas.addEventListener("mousemove", function(e) { 
    var cRect = canvas.getBoundingClientRect();        // Gets CSS pos, and width/height
    var canvasX = Math.round(e.clientX - cRect.left);  // Subtract the 'left' of the canvas 
    var canvasY = Math.round(e.clientY - cRect.top);   // from the X/Y positions to make  
    ctx.clearRect(0, 0, canvas.width, canvas.height);  // (0,0) the top left of the canvas
    ctx.fillText("X: "+canvasX+", Y: "+canvasY, 10, 20);
});

चल उदाहरण

Math.round का उपयोग x,y स्थितियों को पूर्णांक सुनिश्चित करने के कारण होता है, क्योंकि कैनवास की बाउंडिंग आयत में पूर्णांक स्थिति नहीं हो सकती है।

नमस्ते दुनिया

एचटीएमएल 

<canvas id="canvas" width=300 height=100 style="background-color:#808080;">
</canvas>

जावास्क्रिप्ट 

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "34px serif";
ctx.textAlign = "center";
ctx.textBaseline="middle"; 
ctx.fillStyle = "#FFF";
ctx.fillText("Hello World",150,50);

परिणाम

एचटीएमएल 5 कैनवास के साथ हैलो वर्ल्ड

Html5 कैनवस क्षमताओं और उपयोग के लिए एक सूचकांक

कैनवस की क्षमताएं

कैनवस आपको अपने वेबपेज पर प्रोग्राम करने की सुविधा देता है:

कैनवास चित्र बड़े पैमाने पर स्टाइल किए जा सकते हैं:

कैनवस के उपयोग

ड्रॉइंग को कैनवस पर कहीं भी जोड़ा और पोस्ट किया जा सकता है ताकि इसे बनाने के लिए इस्तेमाल किया जा सके:

  • पेंट / स्केच एप्लिकेशन,
  • तेजी से पुस्तक इंटरैक्टिव खेल,
  • चार्ट, ग्राफ़ जैसे डेटा विश्लेषण
  • फोटोशॉप जैसी इमेजिंग,
  • फ्लैश की तरह विज्ञापन और आकर्षक वेब सामग्री।

कैनवास आपको छवियों के लाल, हरे, नीले और अल्फा घटक रंगों में हेरफेर करने की अनुमति देता है। यह कैनवास को फ़ोटोशॉप के समान परिणामों के साथ छवियों में हेरफेर करने की अनुमति देता है।

  • पिक्सेल स्तर पर छवि के किसी भी भाग को फिर से व्यवस्थित करें (यदि आप एचएसएल का उपयोग करते हैं, तो आप महत्वपूर्ण प्रकाश व्यवस्था और संतृप्ति को बनाए रखते हुए एक छवि को फिर से चित्रित कर सकते हैं, इसलिए परिणाम छवि पर किसी को थप्पड़ पेंट की तरह नहीं दिखता है),
  • "नॉकआउट" छवि में किसी व्यक्ति / आइटम के आसपास की पृष्ठभूमि,
  • एक छवि का पता लगाएँ और फ्लडफ़िल भाग (जैसे, उपयोगकर्ता द्वारा क्लिक की जाने वाली फूल की पंखुड़ी का रंग हरे से पीले रंग में बदलें - बस उस पर क्लिक की गई पंखुड़ी!)।
  • भावाभिव्यक्ति करें (जैसे कप के चारों ओर एक छवि लपेटें),
  • सामग्री के लिए एक छवि की जाँच करें (जैसे। चेहरे की पहचान),
  • एक छवि के बारे में सवालों के जवाब: क्या मेरी पार्किंग स्थल की इस छवि में एक कार खड़ी है?
  • मानक छवि फ़िल्टर (ग्रेस्केल, सीपिया, आदि) लागू करें
  • कोई भी विदेशी छवि फ़िल्टर लागू करें जिसे आप सपना देख सकते हैं (सोबेल एज डिटेक्शन),
  • छवियों को मिलाएं। यदि प्रिय दादी मुकदमा इसे परिवार के पुनर्मिलन में नहीं बना सकीं, तो बस पुनर्मिलन छवि में "फोटोशॉप" करें। चचेरे भाई फिल पसंद नहीं है - बस "उसे बाहर फोटोशॉप,"
  • एक वीडियो चलाएं / एक वीडियो से एक फ्रेम पकड़ो,
  • कैनवास सामग्री को .jpg के रूप में निर्यात करें .Png छवि (आप वैकल्पिक रूप से फसल भी कर सकते हैं या छवि को एनोटेट कर सकते हैं और परिणाम को एक नई छवि के रूप में निर्यात कर सकते हैं)

कैनवास ड्राइंग को स्थानांतरित करने और संपादित करने के बारे में (उदाहरण के लिए एक्शन गेम बनाने के लिए):

  • कैनवास पर कुछ खींचने के बाद, उस मौजूदा ड्राइंग को स्थानांतरित या संपादित नहीं किया जा सकता है। यह सामान्य गलतफहमी है कि कैनवस ड्रॉइंग चल रहे हैं, यह स्पष्ट करने योग्य है: मौजूदा कैनवस चित्र को संपादित या स्थानांतरित नहीं किया जा सकता है!
  • कैनवस बहुत जल्दी आकर्षित करता है। कैनवस एक सेकंड के अंश में सैकड़ों चित्र, ग्रंथ, रेखाएँ और वक्र बना सकते हैं। ड्राइंग को तेज करने के लिए उपलब्ध होने पर यह GPU का उपयोग करता है।
  • कैनवस जल्दी और बार-बार किसी चीज को खींचने और फिर उसे एक नई स्थिति में लाने के द्वारा गति का भ्रम पैदा करता है। टेलीविज़न की तरह, यह लगातार घूमने से आँख को गति का भ्रम होता है।

घुमाएँ

2 डी संदर्भ की rotate(r) विधि कैनवास को मूल के आसपास रेडियन की निर्दिष्ट राशि r द्वारा घुमाती है ।

एचटीएमएल 

<canvas id="canvas" width=240 height=240 style="background-color:#808080;">
</canvas>

<button type="button" onclick="rotate_ctx();">Rotate context</button>

जावास्क्रिप्ट 

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#FFF";
ctx.fillText("Hello World", ox, oy);

rotate_ctx = function() {
  // translate so that the origin is now (ox, oy) the center of the canvas
  ctx.translate(ox, oy);
  // convert degrees to radians with radians = (Math.PI/180)*degrees. 
  ctx.rotate((Math.PI / 180) * 15);
  ctx.fillText("Hello World", 0, 0);
  // translate back
  ctx.translate(-ox, -oy);
};

JSfiddle पर लाइव डेमो

छवि फ़ाइल के लिए कैनवास सहेजें

आप विधि का उपयोग कर एक छवि फ़ाइल को एक कैनवास बचा सकता है canvas.toDataURL() कि रिटर्न कैनवास 'छवि डेटा के लिए डेटा यूआरआई।

विधि दो वैकल्पिक पैरामीटर canvas.toDataURL(type, encoderOptions) ले सकती है canvas.toDataURL(type, encoderOptions) : type छवि प्रारूप है (यदि चूक चूक image/png ); encoderOptions 0 और 1 के बीच की एक संख्या है जो छवि गुणवत्ता को दर्शाती है (डिफ़ॉल्ट 0.92 है)।

यहां हम एक कैनवास खींचते हैं और कैनवास के डेटा URI को "MyImage.jpg डाउनलोड करें" लिंक से जोड़ते हैं।

एचटीएमएल 

<canvas id="canvas" width=240 height=240 style="background-color:#808080;">
</canvas>
<p></p>
<a id="download" download="myImage.jpg" href="" onclick="download_img(this);">Download to myImage.jpg</a>

जावास्क्रिप्ट 

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#800";
ctx.fillRect(ox / 2, oy / 2, ox, oy);

download_img = function(el) {
  // get image URI from canvas object
  var imageURI = canvas.toDataURL("image/jpg");
  el.href = imageURI;
};

JSfiddle पर लाइव डेमो ।



Modified text is an extract of the original Stack Overflow Documentation
के तहत लाइसेंस प्राप्त है CC BY-SA 3.0
से संबद्ध नहीं है Stack Overflow