وHTML <canvas> يستخدم عنصر لرسم الرسومات على صفحة ويب.
يتم إنشاء الرسم إلى اليسار مع <canvas> . فإنه يدل على أربعة عناصر: مستطيل أحمر، مستطيل الانحدار، مستطيل متعدد الألوان، والنص متعدد الألوان.
ما هو HTML Canvas ؟
وHTML <canvas> يستخدم عنصر لرسم الرسومات، على الطاير، عن طريق البرمجة (usually JavaScript) .
و <canvas> العنصر فقط وعاء للرسومات. يجب عليك استخدام برنامج نصي لرسم الواقع الرسومات.
Canvas لديها عدة طرق لرسم مسارات، وصناديق، والدوائر، والنص، وإضافة الصور.
العنصر قماش هو جزء من HTML5 ويسمح لديناميكية، وجعلها النصية من الأشكال 2D و الصور النقطية. وهو مستوى منخفض، نموذج إجرائي يقوم بتحديث صورة نقطية وليس لديها المدمج في الرسم البياني المشهد.
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل <canvas> العنصر.
| جزء | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | تسعة | 2.0 | 3.1 | تسعة |
التاريخ
وقدم قماش في البداية من قبل شركة آبل للاستخدام داخل ماك OS X عنصر بكت الخاصة في عام 2004 التطبيقات توفير الطاقة مثل الحاجيات لوحة ومتصفح سفاري.
وفي وقت لاحق، في عام 2005 تم اعتماده في الإصدار 1.8 من المتصفحات أبو بريص، وأوبرا في عام 2006، وموحدة من قبل تطبيق مجموعة الويب التشعبي تقنية العمل (WHATWG) على المواصفات الجديدة المقترحة لتقنيات الويب الجيل القادم.
استعمال
يتكون قماش من منطقة drawable المحددة في التعليمات البرمجية HTML مع ارتفاع وسمات العرض. شفرة جافا سكريبت يمكنهم الوصول إلى المنطقة من خلال مجموعة كاملة من وظائف الرسم مماثلة لتلك التي من واجهات برمجة التطبيقات 2D المشتركة الأخرى، مما يسمح للرسومات ديناميكيا.
وتشمل بعض الاستخدامات المتوقعة من قماش الرسوم البيانية بناء، والرسوم المتحركة، والألعاب، وتكوين الصورة.
Canvas أمثلة
A canvas هو مساحة مستطيلة على صفحة HTML. افتراضيا، canvas لا يوجد لديه الحدود وأي محتوى.
العلامات تبدو مثل هذا:
<canvas id="myCanvas" width="200" height="100"></canvas>
Note: تحديد دائما سمة معرف (to be referred to in a script) ، والعرض والارتفاع ويعزو لتحديد حجم canvas .
لإضافة الحدود، استخدم style السمة:
الأساسية Canvas مثال
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas> انها محاولة لنفسك » الرسم مع جافا سكريبت
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75); انها محاولة لنفسك » ارسم خطا
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke(); انها محاولة لنفسك » أرسم دائرة
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke(); انها محاولة لنفسك » رسم النص
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50); انها محاولة لنفسك » نص السكتة الدماغية
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50); انها محاولة لنفسك » رسم الخطي التدرج
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); انها محاولة لنفسك » رسم التعميم التدرج
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); انها محاولة لنفسك » رسم صورة
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10); انها محاولة لنفسك » HTML Canvas دروس
لمعرفة كل شيء عن HTML <canvas> ، قم بزيارة موقعنا الكامل HTML Canvas التعليمي .