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

HTML5 कैनवस drawImage() में एंटीएलियासिंग कैसे लागू करें?

डाउनस्केलिंग में एंटीएलियासिंग के लिए रीसैंपलिंग गुणवत्ता सेट करें।

ctx.imageSmoothingQuality = "low|medium|high";

ऑफ-स्क्रीन कैनवस से चरणबद्ध डाउनस्केलिंग (बेहतर गुणवत्ता):

var c = document.createElement('canvas');
var ocx = c.getContext('2d');
c.width = img.width * 0.5;
c.height = img.height * 0.5;
ocx.drawImage(img, 0, 0, c.width, c.height);

// आधा और कम करें, दोहराएं
ocx.drawImage(c, 0, 0, c.width * 0.5, c.height * 0.5);

नोट: प्रत्येक चरण में 2x से अधिक न घटाएं। imageSmoothingEnabled = true (डिफ़ॉल्ट) सुनिश्चित करें।

  1. HTML5 कैनवास पर आयत (Rectangle) कैसे बनाएं? HTML5 कैनवास पर आयत (Rectangle) कैसे बनाएं?

    HTML5 <canvas> टैग का उपयोग स्क्रिप्टिंग के माध्यम से ग्राफिक्स, एनिमेशन आदि बनाने के लिए किया जाता है। कैनवास एलिमेंट में getContext नामक एक DOM मेथड होता है, जो रेंडरिंग कॉन्टेक्स्ट और इसके ड्राइंग फंक्शन्स प्राप्त करता है।HTML5 कैनवास के साथ आयत बनाने के लिए fillRect(x, y, width, height) मे

  1. HTML5 कैनवास पर SVG फ़ाइल कैसे बनाएं? HTML5 कैनवास पर SVG फ़ाइल कैसे बनाएं?

    कैनवास पर SVG बनाने के लिए, आपको SVG इमेज का उपयोग करना होगा। सबसे पहले, <foreignObject> एलिमेंट का उपयोग करें जिसमें HTML हो। उसके बाद, SVG इमेज को कैनवास में बनाएं।उदाहरणHTML कैनवास पर SVG फ़ाइल बनाने के लिए निम्न कोड आज़माएं:<!DOCTYPE html> <html>    <head>  

  1. HTML5 कैनवास के साथ इमेज का उपयोग कैसे करें? HTML5 कैनवास के साथ इमेज का उपयोग कैसे करें?

    HTML5 <canvas> टैग का उपयोग स्क्रिप्टिंग के माध्यम से ग्राफिक्स, एनिमेशन आदि बनाने के लिए किया जाता है। HTML5 कैनवास के साथ इमेज का उपयोग करने के लिए drawImage() मेथड का उपयोग करें। यह मेथड दी गई इमेज को कैनवास पर बनाता है।उदाहरणHTML कैनवास के साथ इमेज का उपयोग करने का तरीका सीखने के लिए निम्न