English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
يضيف طريقة scale() في API Canvas 2D التغيير في التوسيع للوحدات في اتجاه x المستوى الأفقي واتجاه y العمودي. بشكل افتراضي، وحدة واحدة في canvas هي نفسها لكل بكسل. على سبيل المثال، إذا استخدمنا 0.5 كمعامل التوسيع، فإن الوحدة النهائية ستكون 0.5 بكسل، وستصبح حجم الشكل نصف حجمه. بنفس الطريقة، إذا استخدمنا 2.0 كمعامل التوسيع، ستزيد حجم الوحدة إلى اثنين من البكسلات. وسيصبح حجم الشكل ضعف حجمه.
رسم مستطيل، زيادة الحجم إلى 200%، ثم رسم مستطيل آخر:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>استخدام طريقة scale() في HTML canvas - درس أساسي (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
متصفحك لا يدعم علامة <canvas> الخاصة بـ HTML5.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
</script>
</body>
</html>الاختبار لرؤية ‹/›IEFirefoxOperaChromeSafari
يدعم إنترنت إكسبلورر 9، فايرفوكس، أوبرا، تشوروم، وسفاري scale(). الطريقة.
ملاحظة:يستخدم متصفح إنترنت إكسبلورر 8 وأولى إصداراته عنصر <canvas>.
يوسع طريقة scale() الرسم الحالي إلى أكبر أو أصغر.
ملاحظة:إذا قمت بتوسيع الرسم، سيتم توسيع جميع الرسومات اللاحقة أيضًا. ستتم توسيع التركيز أيضًا. إذا scale(2,2)، فإن الرسم سيكون في موقع يبعد مزدوجًا عن الزاوية العلوية اليسرى للملف.
| لغة البرمجة JavaScript: | السياق.scale(scalewidth,scaleheight); |
|---|
| معلمة | وصف |
|---|---|
| scalewidth | توسيع عرض الرسم الحالية (1=100%，0.5=50%，2=200%，إلى آخره). |
| scaleheight | توسيع عالية الرسم الحالية (1=100%，0.5=50%，2=200%，إلى آخره). |
رسم مستطيل؛ زيادة الحجم إلى 200%، رسم مستطيل آخر؛ زيادة الحجم إلى 200%، رسم مستطيل آخر؛ زيادة الحجم إلى 200%، رسم مستطيل آخر:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>استخدام طريقة scale() في HTML canvas - درس أساسي (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="170" style="border:1px solid #d3d3d3;">
متصفحك لا يدعم علامة <canvas> الخاصة بـ HTML5.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
</script>
</body>
</html>الاختبار لرؤية ‹/›