القائمة الرئيسية

الصفحات

 HTML5 - Canvas

 

HTML5 element <canvas> gives you an easy and powerful way to draw graphics using JavaScript. It can be used to draw graphs, make photo compositions or do simple (and not so simple) animations.

Here is a simple <canvas> element which has only two specific attributes width and height plus all the core HTML5 attributes like id, name and class, etc.

يمنحك عنصر HTML5 <canvas> طريقة سهلة وفعالة لرسم الرسومات باستخدام JavaScript. يمكن استخدامه لرسم الرسوم البيانية ، وإنشاء تكوينات للصور أو عمل رسوم متحركة بسيطة (وليست بهذه البساطة). إليك عنصر <canvas> بسيط يحتوي على سمتين محددتين فقط ، وهما العرض والارتفاع بالإضافة إلى جميع سمات HTML5 الأساسية مثل المعرف والاسم والفئة وما إلى ذلك.

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

You can easily find that <canvas> element in the DOM using getElementById() method as follows −

var canvas = document.getElementById("mycanvas");

Let us see a simple example on using <canvas> element in HTML5 document.


<!DOCTYPE HTML>

<html>
   <head>
   
      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>
   
   <body>
      <canvas id = "mycanvas" width = "100" height = "100"></canvas>
   </body>
</html>

The Rendering Context

The <canvas> is initially blank, and to display something, a script first needs to access the rendering context and draw on it.

The canvas element has a DOM method called getContext, used to obtain the rendering context and its drawing functions. This function takes one parameter, the type of context2d.

Following is the code to get required context along with a check if your browser supports <canvas> element −

سياق العرض يكون <canvas> فارغًا في البداية ، ولعرض شيء ما ، يحتاج البرنامج النصي أولاً إلى الوصول إلى سياق العرض والرسم عليه. يحتوي عنصر Canvas على طريقة DOM تسمى getContext ، تُستخدم للحصول على سياق العرض ووظائف الرسم الخاصة به. هذه الوظيفة تأخذ معلمة واحدة ، نوع Context2d. فيما يلي الكود للحصول على السياق المطلوب بالإضافة إلى التحقق مما إذا كان متصفحك يدعم عنصر <canvas> -

var canvas  = document.getElementById("mycanvas");

if (canvas.getContext) {   
   var ctx = canvas.getContext('2d');   
   // drawing code here   
} else {   
   
   // canvas-unsupported code here 
}  

Browser Support

The latest versions of Firefox, Safari, Chrome and Opera all support for HTML5 Canvas but IE8 does not support canvas natively.

You can use ExplorerCanvas to have canvas support through Internet Explorer. You just need to include this JavaScript as follows −

تدعم أحدث إصدارات Firefox و Safari و Chrome و Opera كلًا من HTML5 Canvas ولكن IE8 لا يدعم Canvas محليًا. يمكنك استخدام ExplorerCanvas للحصول على دعم قماش من خلال Internet Explorer. تحتاج فقط إلى تضمين JavaScript هذا على النحو التالي -

<!--[if IE]><script src = "excanvas.js"></script><![endif]-->

HTML5 Canvas Examples

This tutorial covers the following examples related to HTML5 <canvas> element.

هل اعجبك الموضوع :

تعليقات