এসভিজি এবং এইচটিএমএল 5 ক্যানভাসের মধ্যে পার্থক্য কী? তারা উভয়ই আমার সাথে একই রকম আচরণ করছে বলে মনে হয়। মূলত, তারা উভয় স্থানাঙ্ক পয়েন্টগুলি ব্যবহার করে ভেক্টর শিল্পকর্ম আঁকেন।
আমি কী মিস করছি? এসভিজি এবং এইচটিএমএল 5 ক্যানভাসের মধ্যে প্রধান পার্থক্যগুলি কী কী? কেন আমি অন্যটির থেকে একটি বেছে নেব?
উত্তর:
উইকিপিডিয়া: http://en.wikedia.org/wiki/Canvas_element দেখুন
ব্রাউজারগুলিতে আকার আঁকার জন্য এসভিজি হ'ল পূর্বের মান। তবে এসভিজি মৌলিকভাবে উচ্চতর স্তরে রয়েছে কারণ প্রতিটি আঁকানো আকৃতি একটি দৃশ্যের গ্রাফ বা ডিওএম-তে একটি অবজেক্ট হিসাবে স্মরণ করা হয় যা পরে কিছুটা মানচিত্রে রেন্ডার করা হয়। এর অর্থ হ'ল যদি কোনও এসভিজি অবজেক্টের বৈশিষ্ট্যগুলি পরিবর্তন করা হয়, ব্রাউজারটি স্বয়ংক্রিয়ভাবে দৃশ্যটিকে পুনরায় রেন্ডার করতে পারে।
উপরের উদাহরণে, একবার আয়তক্ষেত্র আঁকলে, এটি আঁকানো হয়েছিল তা সিস্টেমটি ভুলে যায় is যদি এর অবস্থান পরিবর্তন করা যায় তবে আয়তক্ষেত্র দ্বারা আবৃত কোনও অবজেক্ট সহ পুরো দৃশ্যটি আবার চিত্রিত করা দরকার। তবে সমতুল্য এসভিজির ক্ষেত্রে, কেউ কেবল আয়তক্ষেত্রের অবস্থানের বৈশিষ্ট্যগুলি পরিবর্তন করতে পারে এবং ব্রাউজারটি কীভাবে পুনরায় রঙ করতে হবে তা নির্ধারণ করে। স্তরগুলিতে ক্যানভাস আঁকা এবং তারপরে নির্দিষ্ট স্তরগুলি পুনরায় তৈরি করাও সম্ভব।
এসভিজি চিত্রগুলি এক্সএমএলে উপস্থাপিত হয় এবং জটিল দৃশ্যগুলি এক্সএমএল সম্পাদনা সরঞ্জামগুলির সাহায্যে তৈরি এবং রক্ষণাবেক্ষণ করা যায়।
এসভিজি দৃশ্যের গ্রাফ ইভেন্ট হ্যান্ডলারগুলিকে অবজেক্টের সাথে যুক্ত হতে সক্ষম করে, সুতরাং একটি আয়তক্ষেত্রটি অনক্লিক ইভেন্টে প্রতিক্রিয়া জানাতে পারে। ক্যানভাসের সাথে একই কার্যকারিতাটি পেতে, ক্লিক করা হয়েছে কিনা তা নির্ধারণের জন্য একটি আঁকানো আয়তক্ষেত্রের স্থানাঙ্কের সাথে ম্যানু ক্লিকের স্থানাঙ্কগুলি ম্যানুয়ালি মেশানো উচিত।
ধারণাগতভাবে, ক্যানভাস হ'ল একটি নিম্ন স্তরের প্রোটোকল যার উপর ভিত্তি করে এসভিজি নির্মিত হতে পারে [ পরিস্থিতি জটিল কারণ ক্যানভাসের জন্য দৃশ্য গ্রাফ লাইব্রেরি রয়েছে এবং এসভিজির কিছুটা মানচিত্রের ম্যানিপুলেশন কার্যকারিতা রয়েছে।
আপডেট: আমি এর মার্কআপ ভাষার দক্ষতার কারণে এসভিজি ব্যবহার করি - এটি এক্সএসএলটি দ্বারা প্রক্রিয়া করা যায় এবং এর নোডগুলিতে অন্য মার্কআপ ধরে রাখতে পারে। একইভাবে আমি আমার মার্কআপে (কেমিস্ট্রি) এসভিজি ধরে রাখতে পারি। এটি আমাকে মার্কআপের সংমিশ্রণ দ্বারা এসভিজি বৈশিষ্ট্যগুলি (যেমন রেন্ডারিং) ম্যানিপুলেট করতে সহায়তা করে। ক্যানভাসে এটি সম্ভব হতে পারে তবে আমি সন্দেহ করি এটি অনেক বেশি শক্ত।
এসভিজি হ'ল "ড্র" প্রোগ্রামের মতো। অঙ্কনটি প্রতিটি আকারের জন্য অঙ্কন নির্দেশাবলী হিসাবে নির্দিষ্ট করা হয় এবং যে কোনও আকারের কোনও অংশ পরিবর্তন করা যায়। অঙ্কনগুলি আকৃতিমুখী।
ক্যানভাস একটি "পেইন্ট" প্রোগ্রামের মতো। পিক্সেলগুলি একবার স্ক্রিনে হিট হয়ে গেলে এটি আপনার অঙ্কন। আপনি অন্যান্য পিক্সেল দিয়ে ওভাররাইট করে শেপগুলি পরিবর্তন করতে পারবেন না। চিত্রগুলি পিক্সেলমুখী or
কিছু প্রোগ্রামের জন্য অঙ্কন পরিবর্তন করতে সক্ষম হওয়া খুব গুরুত্বপূর্ণ; যেমন খসড়া অ্যাপস, ডায়াগ্রামিং সরঞ্জামগুলি ইত্যাদি So সুতরাং এসভিজির এখানে একটি সুবিধা রয়েছে।
কিছু শৈল্পিক প্রোগ্রামের জন্য পৃথক পিক্সেল নিয়ন্ত্রণ করতে সক্ষম হওয়া গুরুত্বপূর্ণ।
মাউস ড্র্যাগগুলির মাধ্যমে ব্যবহারকারী-ম্যানিপুলেশনের জন্য দুর্দান্ত অ্যানিমেশন পারফরম্যান্স পাওয়া এসভিজির চেয়ে ক্যানভাসের সাথে সহজ।
কম্পিউটারের স্ক্রিনে একটি একক পিক্সেল প্রায়শই 4 বাইট তথ্য ব্যবহার করে এবং একটি কম্পিউটার স্ক্রিন আজকাল বেশ কয়েকটি মেগাবাইট লাগে। সুতরাং আপনি যদি কোনও ব্যবহারকারীকে একটি চিত্র সম্পাদনা করতে চান এবং তারপরে এটি আবার আপলোড করতে চান তবে ক্যানভাস অসুবিধেয় হতে পারে।
বিপরীতে, এসভিজি ব্যবহার করে পুরো স্ক্রিনটি কভার করে এমন কয়েকটি মুখ্য আকার আঁকতে দ্রুত কয়েক বাইট, ডাউনলোড আপ লাগে এবং অন্য দিকের দিকে নেমে আসার সাথে সাথে একই সুবিধার সাথে আবার সহজেই আপলোড করা যায়। সুতরাং এসভিজি ক্যানভাসের চেয়ে দ্রুত হতে পারে।
গুগল এসভিজির মাধ্যমে গুগল ম্যাপ প্রয়োগ করেছে। এটি ওয়েব অ্যাপটিকে তার জিপি অভিনয় এবং মসৃণ স্ক্রোলিং দেয় sc
ক্যানভাস বনাম এসভিজির উচ্চ স্তরের সংক্ষিপ্তসার
ক্যানভাস
এসভিজি
বিস্তারিত পার্থক্যের জন্য, http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx পড়ুন
তারা কী এবং আপনার জন্য তারা কী করে তার মধ্যে পার্থক্য রয়েছে।
বিন্যাস বনাম এপিআই-তে কিছুটা বিশদভাবে জানাতে:
এসভিজি দিয়ে আপনি বিভিন্ন সরঞ্জামে ফাইলটি দেখতে, সংরক্ষণ এবং সম্পাদনা করতে পারবেন। ক্যানভাসের সাহায্যে আপনি কেবল আঁকেন এবং স্ক্রিনের ফলাফলের চিত্রটি বাদ দিয়ে আপনি কী করেছেন সে সম্পর্কে কিছুই রাখা যায় না। আপনি উভয়কে অ্যানিমেট করতে পারেন, এসভিজি কেবলমাত্র নির্দিষ্ট উপাদান এবং বৈশিষ্ট্যগুলি দেখে আপনার জন্য পুনরায় আঁকানো পরিচালনা করে, ক্যানভাসের সাথে আপনাকে প্রতিটি ফ্রেম এপিআই ব্যবহার করে নিজেকে পুনরায় আঁকতে হয়। আপনি উভয় স্কেল করতে পারেন, তবে এসভিজি এটি স্বয়ংক্রিয়ভাবে করে, আবার ক্যানভাসের সাথে, আপনাকে প্রদত্ত আকারের জন্য অঙ্কন কমান্ডগুলি পুনরায় ইস্যু করতে হবে।
এসভিজি এবং ক্যানভাসের জন্য দুটি জিনিস আমাকে সবচেয়ে বেশি আঘাত করেছিল,
ডিওএম ছাড়াই ক্যানভাস ব্যবহারের ক্ষমতা, যেখানে এসভিজি যেমন ডিওএমের উপর নির্ভর করে এবং জটিলতা বাড়ায় কর্মক্ষমতাটি ধীর হয়ে যায়। গেম ডিজাইনের মতো
এসভিজি ব্যবহারের সুবিধা হবে যে ক্যানভাসের অভাব নেই এমন প্ল্যাটফর্মগুলির জুড়ে রেজোলিউশনটি একই থাকবে।
আরও অনেক বিশদ এই সাইটে সরবরাহ করা হয়। http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/
এটি সম্পূর্ণ আপনার প্রয়োজন / প্রয়োজনের উপর নির্ভর করে।
আপনি যদি কেবল কোনও পর্দায় কোনও চিত্র / চার্ট প্রদর্শন করতে চান তবে প্রস্তাবিত পদ্ধতির নাম হ'ল ক্যানভাস। (উদাহরণ পিএনজি, জিআইএফ, বিএমপি ইত্যাদি)
আপনি যদি নিজের গ্রাফিক্সের বৈশিষ্ট্যগুলি প্রসারিত করতে চান উদাহরণস্বরূপ, যদি আপনি চার্টের উপর মাউসটি প্রদর্শন ক্ষেত্রটি লুণ্ঠন না করে নির্দিষ্ট অঞ্চলটি জুম করতে চান তবে আপনি এসভিজি নির্বাচন করুন। (ভাল উদাহরণ হ'ল অটোক্যাড, ভিজিও, জিআইএস ফাইল)।
আপনি যদি আকৃতির সংযোজক সহ একটি গতিশীল ফ্লো ডায়াগ্রাম স্রষ্টার সরঞ্জাম তৈরি করতে চান তবে কানভাসের চেয়ে এসভিজি নির্বাচন করা ভাল।
যখন পর্দার আকার বৃদ্ধি পায়, ক্যানভাস আরও পিক্সেল আঁকার প্রয়োজন হ্রাস করতে শুরু করে।
যখন স্ক্রিনে অবজেক্টের সংখ্যা বৃদ্ধি পায়, এসভিজি
হ্রাস করতে শুরু করে যখন আমরা ক্রমাগত তাদের ডিওমে যুক্ত করি।
এছাড়াও দয়া করে উল্লেখ করুন: http://msdn.microsoft.com/en-us/library/gg193983(v=vs.85).aspx
এসভিজি
ব্যবহারের ক্ষেত্রে ভিত্তিক এসভিজি লোগো, চার্টের জন্য ব্যবহৃত হয় কারণ এর ভেক্টর গ্রাফিকগুলি আপনি আঁকেন এবং এটি ভুলে গেছেন। পুনরায় আকারের আকারের (বা জুম) এর মতো দেখলে পোর্ট পরিবর্তন হয় তখন এটি নিজেই সামঞ্জস্য হয় এবং পুনরায় আঁকার প্রয়োজন হয় না।
ক্যানভাস
ক্যানভাসটি বিটম্যাপ (বা রাস্টার) এটি পিক্সেলের পর্দাতে পেন্টিং করে done এটি নির্দিষ্ট অঞ্চলে গেমস বা গ্রাফিক্সের অভিজ্ঞতার ( https://www.chromeexperiments.com/webgl ) বিকাশ করতে ব্যবহৃত হয় যা এটি পিক্সেল এঁকে দেয় এবং এটি অন্যরকম করে আবার চিত্র দ্বারা পরিবর্তন করে। যেহেতু এটির রাস্টার টাইপ রয়েছে সেহেতু আমাদের দেখতে পোর্ট পরিবর্তন হিসাবে পুরোপুরি পুনরায় আঁকতে হবে।
রেফারেন্স
http://www.sitepPoint.com/7-reason-to-consider-svgs-instead-of- ক্যানভাস
http://en.wikedia.org/wiki/WebGL
http://vector-conversions.com/vectorizing/raster_vs_vector.html
SVGফাইল বিন্যাসের মতো অঙ্কনের একটি স্পেসিফিকেশন। একটি এসভিজি একটি নথি document আপনি এইচটিএমএল ফাইলের মতো এসভিজি ফাইলগুলি বিনিময় করতে পারেন। এবং অতিরিক্ত হিসাবে এসভিজি উপাদানগুলি এবং এইচটিএমএল উপাদানগুলি একই ডিওএম এপিআই ভাগ করে, এইচটিএমএল ডিওএম তৈরি করা যেমন সম্ভব তেমনভাবে একটি এসভিজি ডোম তৈরি করতে জাভাস্ক্রিপ্ট ব্যবহার করা সম্ভব। তবে এসভিজি ফাইল তৈরি করতে আপনার জাভাস্ক্রিপ্টের দরকার নেই। একটি সাধারণ পাঠ্য সম্পাদক একটি এসভিজি লিখতে যথেষ্ট। অঙ্কনটিতে আকারগুলির স্থানাঙ্ক গণনা করতে আপনার কমপক্ষে একটি ক্যালকুলেটর প্রয়োজন।
CANVASকেবল একটি অঙ্কনের অঞ্চল। ক্যানভাসের সামগ্রী তৈরি করতে জাভাস্ক্রিপ্ট ব্যবহার করা দরকার। আপনি একটি ক্যানভাস বিনিময় করতে পারবেন না। এটি কোনও দলিল নয়। এবং ক্যানভাসের উপাদানগুলি ডিওএম গাছের অংশ নয়। আপনি ক্যানভাসের বিষয়বস্তুগুলি পরিচালনা করতে DOM এপিআই ব্যবহার করতে পারবেন না। পরিবর্তে ক্যানভাসে আকার আঁকতে আপনাকে একটি উত্সর্গীকৃত ক্যানভাস এপিআই ব্যবহার করতে হবে।
এর সুবিধাটি SVGহ'ল, আপনি অঙ্কনটি একটি দস্তাবেজ হিসাবে বিনিময় করতে পারেন। এর সুবিধাটি CANVASহ'ল, এতে সামগ্রী তৈরি করার জন্য কম ভার্বোস জাভাস্ক্রিপ্ট এপিআই রয়েছে।
এখানে একটি উদাহরণ দেওয়া আছে, যা দেখায় যে আপনি অনুরূপ ফলাফল অর্জন করতে পারেন তবে জাভাস্ক্রিপ্টে এটি কীভাবে করবেন তা খুব আলাদা।
// Italic S in SVG
(function () {
const ns='http://www.w3.org/2000/svg';
let s = document.querySelector('svg');
let p = document.createElementNS (ns, 'path');
p.setAttribute ('id', 'arc');
p.setAttribute ('d', 'M 0.9 -0.9 a 0.8,0.4 -10 0,0 -0.9,0.9');
s.appendChild (p);
let u = document.createElementNS (ns, 'use');
u.setAttribute ('href', '#arc');
u.setAttribute ('transform', 'rotate(180)');
s.appendChild (u);
})();
// Italic S in CANVAS
(function () {
let c = document.querySelector('canvas');
let w = c.width = c.clientWidth;
let h = c.height = c.clientHeight;
let x = c.getContext('2d');
x.lineWidth = 0.05 * w;
x.moveTo (w/2, h/2);
x.bezierCurveTo (w*0.02, h*0.4,
w*0.4, -h*0.02,
w*0.95, h*0.05);
x.moveTo (w/2, h/2);
x.bezierCurveTo (w*(1-0.02), h*(1-0.4),
w*(1-0.4), h*(1+0.02),
w*(1-0.95), h*(1-0.05));
x.stroke();
})();svg, canvas {
width: 3em;
height: 3em;
}
svg {
vertical-align: text-top;
stroke: black;
stroke-width: 0.1;
fill: none;
}
canvas {
vertical-align: text-bottom;
}
div {
float: left;
}<div><svg viewBox="-1 -1 2 2"></svg>VG</div>
<div>CANVA<canvas></canvas></div>আপনি দেখতে পাচ্ছেন ফলাফল প্রায় একই, তবে জাভাস্ক্রিপ্ট কোড সম্পূর্ণ আলাদা।
এসওজি createElement, setAttributeএবং এটি ব্যবহার করে ডোম এপিআই দিয়ে তৈরি করা হয়েছে appendChild। সমস্ত গ্রাফিকগুলি বৈশিষ্ট্যযুক্ত স্ট্রিংগুলিতে রয়েছে। এসভিজির আরও শক্তিশালী আদিম রয়েছে। উদাহরণস্বরূপ ক্যানভাসের এসভিজি আর্ক পাথের সমতুল্য কিছুই নেই। ক্যানভাস উদাহরণটি বেজিয়ার কার্ভ দিয়ে এসভিজি আরকে অনুকরণ করার চেষ্টা করে। এসভিজিতে আপনি উপাদানগুলিকে রূপান্তর করতে পুনরায় ব্যবহার করতে পারেন। ক্যানভাসে আপনি উপাদানগুলি পুনরায় ব্যবহার করতে পারবেন না। পরিবর্তে আপনাকে একবারে এটি কল করার জন্য আপনাকে একটি জাভাস্ক্রিপ্ট ফাংশন লিখতে হবে। এসভিজির একটি রয়েছে viewBoxযা সাধারণীকৃত স্থানাঙ্কগুলি ব্যবহার করতে দেয় যা ঘূর্ণনকে সহজ করে। ক্যানভাসে আপনাকে clientWidthএবং এর উপর ভিত্তি করে নিজেকে স্থানাঙ্কগুলি গণনা করতে হবেclientHeight। এবং আপনি CSS সহ সমস্ত এসভিজি উপাদানগুলিকে স্টাইল করতে পারেন। ক্যানভাসে আপনি সিএসএস দিয়ে কিছু স্টাইল করতে পারবেন না। এসভিজি একটি ডোম হওয়ায় আপনি সমস্ত এসভিজি উপাদানগুলিতে ইভেন্ট হ্যান্ডলারগুলি নির্ধারণ করতে পারেন। ক্যানভাসের উপাদানগুলির কোনও ডিওএম এবং কোনও ডিওএম ইভেন্ট হ্যান্ডলার নেই।
তবে অন্যদিকে কানভাস কোডটি পড়া অনেক সহজ। আপনার এক্সএমএল নামের স্থানগুলি সম্পর্কে যত্ন নেওয়া প্রয়োজন। এবং আপনি সরাসরি গ্রাফিক্স ফাংশনগুলি কল করতে পারেন, কারণ আপনার কোনও ডিওএম তৈরি করার দরকার নেই।
পাঠটি স্পষ্ট: আপনি যদি দ্রুত কিছু গ্রাফিক্স আঁকতে চান তবে ক্যানভাস ব্যবহার করুন। আপনার যদি গ্রাফিকগুলি ভাগ করে নেওয়া দরকার, তবে এটি সিএসএসের সাথে স্টাইল করতে পছন্দ করুন বা আপনার গ্রাফিকগুলিতে DOM ইভেন্ট হ্যান্ডলারগুলি ব্যবহার করতে চান, একটি এসভিজি তৈরি করুন।
উপরোক্ত বিষয়গুলিতে যুক্ত করা:
জেপিইজি, জিআইএফ ইত্যাদির তুলনায় এসভিজি ওয়েবের মাধ্যমে স্থানান্তরিত করার জন্য হালকা ওজনের এবং কোয়ালিটিটি না হারায় পুনরায় আকার দেওয়ার সময় এটি অত্যন্ত স্কেলও হয়।
এসভিজি
এটি অবজেক্ট মডেল-ভিত্তিক।
বৃহত রেন্ডারিং অঞ্চল ব্যবহারের জন্য উপযুক্ত।
এসভিজি ইভেন্ট হ্যান্ডলারের জন্য কোনও সহায়তা সরবরাহ করে।
স্ক্রিপ্ট এবং সিএসএসের মাধ্যমে পরিবর্তন অনুমোদিত।
এসভিজির বেটার স্কেলিবিলিটি রয়েছে
এসভিজি হ'ল ভেক্টর ভিত্তিক (আকারের সমন্বয়ে)।
এসভিজি গেমস গ্রাফিক্সের জন্য উপযুক্ত নয়। এসভিজি রেজোলিউশনের উপর নির্ভর করে না।
এসভিজি এপিআই অ্যানিমেশনের জন্য সক্ষম।
এসভিজি উচ্চ মানের এবং কোনও রেজোলিউশন সহ মুদ্রণের জন্য উপযুক্ত।
ক্যানভাস উপাদান
এটি পিক্সেল ভিত্তিক।
ছোট রেন্ডারিং ব্যবহারের জন্য উপযুক্ত
ক্যানভাস ইভেন্ট হ্যান্ডলারের জন্য কোনও আশ্রয় দেয় না।
পরিবর্তন কেবল স্ক্রিপ্টের মাধ্যমে অনুমোদিত।
ক্যানভাসের স্কেলিবিলিটি খুব খারাপ।
ক্যানভাস হ'ল রাস্টার ভিত্তিক (একটি পিক্সেলের সমন্বয়ে)।
ক্যানভাস গেমস গ্রাফিক্স জন্য উপযুক্ত।
ক্যানভাস সম্পূর্ণরূপে সমাধানের উপর নির্ভরশীল।
অ্যানিমেশনের জন্য ক্যানভাসের কোনও এপিআই নেই।
ক্যানভাস উচ্চ মানের এবং উচ্চ রেজোলিউশন মুদ্রণের জন্য উপযুক্ত নয়।