দ্রষ্টব্য : এটি কীভাবে ক্যানভাস পৃষ্ঠে রেখাঙ্কিত করা হয় তার সাথে লাইন বা গ্রাফিক্স কীভাবে রেন্ডার করা যায় তা নয় ,কীভাবে ক্যানভাসের উপাত্তগুলিতে রেকর্ড করা হয় তা বিদ্যমান ক্যানভাস উপাদানগুলি কীভাবে রেন্ডার করা যায় তা নিয়ে এটি করতে হবে। অন্য কথায়, এই সঙ্গে কাজ করার সবকিছু আছে ক্ষেপক এর ছোটো উপাদান , এবং সঙ্গে কিছুই করার মসৃণায়ন গ্রাফিক্স একটি পটে আকাঁ হচ্ছে। ব্রাউজার কীভাবে লাইন আঁকবে সে সম্পর্কে আমি উদ্বিগ্ন নই; ব্রাউজারযখনক্যানভাস উপাদানটিকে ছোট করে দেওয়া হয় তখনকীভাবে তা রেন্ডার করে তা আমি যত্নশীল।
এমন কোনও ক্যানভাস সম্পত্তি বা ব্রাউজার সেটিং আছে যখন আমি <canvas>উপাদানগুলির স্কেলিংয়ের সময় ইন্টারপোলেশন অক্ষম করতে প্রোগ্রামগতভাবে পরিবর্তন করতে পারি ? একটি ক্রস-ব্রাউজার সমাধান আদর্শ তবে প্রয়োজনীয় নয়; ওয়েবকিট-ভিত্তিক ব্রাউজারগুলি আমার প্রধান লক্ষ্য। পারফরম্যান্স খুব গুরুত্বপূর্ণ।
এই প্রশ্নটি সর্বাধিক অনুরূপ তবে সমস্যাটি যথেষ্টভাবে চিত্রিত করে না। এটি মূল্যবান জন্য, আমি image-rendering: -webkit-optimize-contrastকোন লাভ করার চেষ্টা করেছি ।
আমার কী প্রয়োজন তা পরিষ্কার করার জন্য এই অ্যাপ্লিকেশনটি এইচটিএমএল 5 + জেএস-এ লেখা একটি "রেট্রো" 8-বিট স্টাইলযুক্ত গেম হবে।
উদাহরণস্বরূপ, এখানে একটি উদাহরণ। ( সরাসরি সংস্করণ )
মনে করুন আমার কাছে 21x21 ক্যানভাস রয়েছে ...
<canvas id='b' width='21' height='21'></canvas>... যার সিএসএস রয়েছে যা উপাদানটিকে 5 গুণ বড় করে তোলে (105x105):
canvas { border: 5px solid #ddd; }
canvas#b { width: 105px; height: 105px; } /* 5 * 21 = 105 */
আমি ক্যানভাসের মতো একটি সাধারণ 'এক্স' আঁকছি:
$('canvas').each(function () {
var ctx = this.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(21,21);
ctx.moveTo(0,21);
ctx.lineTo(21,0);
ctx.stroke();
});
বাম দিকে থাকা চিত্রটি ক্রোমিয়াম (14.0) রেন্ডার করে। ডানদিকে থাকা চিত্রটি আমি যা চাই তা (চিত্রিত উদ্দেশ্যে হস্তান্তরিত)।
