getPixelRatio

نسبت تفکیک‌پذیری بافتار Canvas را می‌گیرد تا نمایشگرهای پرتراکم را بتوان درست پوشش داد.

API

getPixelRatio

بازگشت

آرگومان توضیح نوع
number نسبت پیکسل number

پارامترها

پارامتر توضیح نوع پیش‌فرض
context بافتار ترسیم دوبعدی Canvas CanvasRenderingContext2D الزامی

نمونه

کاربرد پایه

import { getPixelRatio } from 'ranuts';

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const ratio = getPixelRatio(ctx);
console.log('نسبت پیکسل:', ratio);

هماهنگی با نمایشگرهای پرتراکم

import { getPixelRatio } from 'ranuts';

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const ratio = getPixelRatio(ctx);

// اندازهٔ Canvas را با نسبت هماهنگ کنید
canvas.width = canvas.clientWidth * ratio;
canvas.height = canvas.clientHeight * ratio;

// بافتار را مقیاس بدهید تا اندازهٔ ترسیم درست بماند
ctx.scale(ratio, ratio);

ترسیم شفاف

import { getPixelRatio } from 'ranuts';

function drawHighDPI(canvas) {
  const ctx = canvas.getContext('2d');
  const ratio = getPixelRatio(ctx);

  // اندازهٔ واقعی را تعیین کنید
  canvas.width = canvas.clientWidth * ratio;
  canvas.height = canvas.clientHeight * ratio;

  // بافتار را مقیاس بدهید
  ctx.scale(ratio, ratio);

  // محتوا را بکشید (بر حسب پیکسل منطقی)
  ctx.fillRect(10, 10, 100, 100);
}

یادداشت‌ها

  1. سازگاری با مرورگرها: ویژگی backingStorePixelRatio را در مرورگرهای گوناگون در نظر می‌گیرد.
  2. پشتیبانی از تراکم بالا: نمایشگرهای پرتراکم (Retina) را خودش می‌رساند تا ترسیم شفاف بماند.
  3. شیوهٔ محاسبه: مقدار devicePixelRatio / backingStorePixelRatio را برمی‌گرداند.
  4. کاربرد: معمولاً در ترسیم روی Canvas، کتابخانه‌های نمودار و ساخت بازی — هر جا شفافیت مهم است — به کار می‌رود.