آموزش HTML - عنصر canvas

عنصر <canvas> در HTML راهی آسان و قدرتمند برای رسم گرافیک با استفاده از جاوااسکریپت در اختیار شما قرار می‌دهد. از آن می‌توان برای رسم نمودارها، ساخت ترکیب‌های تصویری یا انجام پویانمایی‌های ساده (و حتی پیچیده) استفاده کرد.

در ادامه یک عنصر ساده <canvas> آمده است که تنها دو ویژگی اختصاصی width و height را به همراه تمام ویژگی‌های اصلی HTML مانند id، name، class و غیره دارد.

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

شما می‌توانید این عنصر <canvas> را به راحتی با استفاده از متد getElementById() در DOM مطابق زیر پیدا کنید −

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

مثال

بیايید یک نمونه مثال را ببینیم که نحوه استفاده از عنصر <canvas> را در یک سند HTML نشان می‌دهد.

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

محیط رندر (Rendering Context)

عنصر <canvas> در ابتدا خالی است و برای نمایش هر چیزی، یک اسکریپت ابتدا باید به محیط رندر دسترسی پیدا کند. عنصر canvas دارای متدی در DOM به نام getContext است که برای دسترسی به محیط رندر و توابع رسم آن استفاده می‌شود. این تابع یک پارامتر می‌گیرد که همان نوع محیط 2d است.

نمونه کد

در ادامه کدی برای دریافت محیط مورد نظر به همراه بررسی پشتیبانی مرورگر از عنصر <canvas> آمده است −

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

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

آخرین نسخه‌های مرورگرهای فایرفاکس، سافاری، کروم و اپرا همگی از HTML Canvas پشتیبانی می‌کنند، اما مرورگر IE8 به‌صورت بومی از canvas پشتیبانی نمی‌کند.

شما می‌توانید از ExplorerCanvas استفاده کنید تا پشتیبانی از canvas را در اینترنت اکسپلورر داشته باشید. فقط کافی است این جاوااسکریپت را به شکل زیر وارد کنید −

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

بوم HTML - رسم مستطیل‌ها

سه متد برای رسم مستطیل روی بوم وجود دارد −

شماره متد و توضیحات
۱

fillRect(x,y,width,height)

این متد یک مستطیل توپر رسم می‌کند.

۲

strokeRect(x,y,width,height)

این متد خطوط محیطی یک مستطیل را رسم می‌کند.

۳

clearRect(x,y,width,height)

این متد ناحیه مشخص‌شده را پاک کرده و آن را کاملاً شفاف می‌کند.

در اینجا x و y موقعیت گوشه بالا و سمت چپ مستطیل را روی بوم (نسبت به مبدأ) مشخص می‌کنند و width و height همان عرض و ارتفاع مستطیل هستند.

مثال

در ادامه یک مثال ساده آمده است که از متدهای ذکرشده در بالا برای رسم یک مستطیل زیبا استفاده می‌کند.

<!DOCTYPE html>
<html>
<head>
   <style>
      #test {
         width: 100px;
         height:100px;
         margin: 0px auto;
      }
   </style>
   
   <script type="text/javascript">
      function drawShape(){
         
         // Get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            
            // Draw shapes
            ctx.fillRect(25,25,100,100);
            ctx.clearRect(45,45,60,60);
            ctx.strokeRect(50,50,50,50);
         } else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body id="test" onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

بوم HTML - رسم مسیرها (Paths)

برای رسم مسیرها روی بوم به متدهای زیر نیاز داریم −

شماره متد و توضیحات
۱

beginPath()

این متد مسیر فعلی را بازنشانی می‌کند.

۲

moveTo(x, y)

این متد یک زیرمسیر (subpath) جدید با نقطه داده‌شده ایجاد می‌کند.

۳

closePath()

این متد زیرمسیر فعلی را به عنوان بسته نشانه‌گذاری می‌کند و یک زیرمسیر جدید با نقطه‌ای یکسان با نقطه شروع و پایان زیرمسیر تازه بسته‌شده آغاز می‌کند.

۴

fill()

این متد زیرمسیرها را با استایل پرکردن فعلی توپر می‌کند.

۵

stroke()

این متد خطوط محیطی زیرمسیرها را با استایل خطی فعلی رسم می‌کند.

۶

arc(x, y, radius, startAngle, endAngle, anticlockwise)

نقاطی را به زیرمسیر اضافه می‌کند به‌طوری که کمان توصیف‌شده توسط محیط دایره‌ای که آرگومان‌ها مشخص کرده‌اند، از زاویه شروع داده‌شده تا زاویه پایان داده‌شده و در جهت تعیین‌شده، با یک خط مستقیم وصل به نقطه قبلی، به مسیر اضافه می‌شود.

مثال

در ادامه یک مثال ساده آمده است که از متدهای ذکرشده در بالا برای رسم یک شکل استفاده می‌کند.

<!DOCTYPE html>
<html>
<head>
   <style>
      #test {
         width: 100px;
         height:100px;
         margin: 0px auto;
      }
   </style>
   <script type="text/javascript">
      function drawShape(){
         
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            
            // Draw shapes
            ctx.beginPath();
            ctx.arc(75,75,50,0,Math.PI*2,true);  // Outer circle
            ctx.moveTo(110,75);
            ctx.arc(75,75,35,0,Math.PI,false);   // Mouth
            ctx.moveTo(65,65);
            ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
            ctx.moveTo(95,65);
            ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
            ctx.stroke();
         } else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>	
<body id="test" onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>	
</html>

بوم HTML - رسم خطوط

متدهای رسم خط

برای رسم خطوط روی بوم به متدهای زیر نیاز داریم −

شماره متد و توضیحات
۱

beginPath()

این متد مسیر فعلی را بازنشانی می‌کند.

۲

moveTo(x, y)

این متد یک زیرمسیر جدید با نقطه داده‌شده ایجاد می‌کند.

۳

closePath()

این متد زیرمسیر فعلی را به عنوان بسته نشانه‌گذاری می‌کند و یک زیرمسیر جدید با نقطه‌ای یکسان با نقطه شروع و پایان زیرمسیر تازه بسته‌شده آغاز می‌کند.

۴

fill()

این متد زیرمسیرها را با استایل پرکردن فعلی توپر می‌کند.

۵

stroke()

این متد خطوط محیطی زیرمسیرها را با استایل خطی فعلی رسم می‌کند.

۶

lineTo(x, y)

این متد نقطه داده‌شده را به زیرمسیر فعلی متصل می‌کند، به‌طوری که با یک خط مستقیم به نقطه قبلی وصل می‌شود.

مثال

در ادامه یک مثال ساده آمده است که از متدهای ذکرشده در بالا برای رسم یک مثلث استفاده می‌کند.

<!DOCTYPE html>
<html>
<head>
   <style>
      #test {
         width: 100px;
         height:100px;
         margin: 0px auto;
      }
   </style>
   <script type="text/javascript">
      function drawShape(){
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            // Filled triangle
            ctx.beginPath();
            ctx.moveTo(25,25);
            ctx.lineTo(105,25);
            ctx.lineTo(25,105);
            ctx.fill();
            
            // Stroked triangle
            ctx.beginPath();
            ctx.moveTo(125,125);
            ctx.lineTo(125,45);
            ctx.lineTo(45,125);
            ctx.closePath();
            ctx.stroke();
         } else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body id="test" onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

بوم HTML - رسم منحنی‌های بزیه (Bezier Curves)

برای رسم منحنی‌های بزیه روی بوم به متدهای زیر نیاز داریم −

شماره متد و توضیحات
۱

beginPath()

این متد مسیر فعلی را بازنشانی می‌کند.

۲

moveTo(x, y)

این متد یک زیرمسیر جدید با نقطه داده‌شده ایجاد می‌کند.

۳

closePath()

این متد زیرمسیر فعلی را به عنوان بسته نشانه‌گذاری می‌کند و یک زیرمسیر جدید با نقطه‌ای یکسان با نقطه شروع و پایان زیرمسیر تازه بسته‌شده آغاز می‌کند.

۴

fill()

این متد زیرمسیرها را با استایل پرکردن فعلی توپر می‌کند.

۵

stroke()

این متد خطوط محیطی زیرمسیرها را با استایل خطی فعلی رسم می‌کند.

۶

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

این متد نقطه داده‌شده را به مسیر فعلی اضافه می‌کند، به‌طوری که با یک منحنی بزیه درجه سوم (cubic) و با اهرم‌های کنترلی داده‌شده به نقطه قبلی وصل می‌شود.

پارامترهای x و y در متد bezierCurveTo() مختصات نقطه پایانی هستند. cp1x و cp1y مختصات اولین نقطه کنترلی، و cp2x و cp2y مختصات دومین نقطه کنترلی هستند.

مثال

در ادامه یک مثال ساده آمده است که از متدهای ذکرشده در بالا برای رسم منحنی‌های بزیه استفاده می‌کند.

<!DOCTYPE html>
<html>
<head>
   <style>
      #test {
         width: 100px;
         height:100px;
         margin: 0px auto;
      }
   </style>
   <script type="text/javascript">
      function drawShape(){
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.moveTo(75,40);
            ctx.bezierCurveTo(75,37,70,25,50,25);
            ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
            ctx.bezierCurveTo(20,80,40,102,75,120);
            ctx.bezierCurveTo(110,102,130,80,130,62.5);
            ctx.bezierCurveTo(130,62.5,130,25,100,25);
            ctx.bezierCurveTo(85,25,75,37,75,40);
            ctx.fill();
         } else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body id="test" onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

بوم HTML - رسم منحنی‌های درجه دوم (Quadratic Curves)

برای رسم منحنی‌های درجه دوم روی بوم به متدهای زیر نیاز داریم −

شماره متد و توضیحات
۱

beginPath()

این متد مسیر فعلی را بازنشانی می‌کند.

۲

moveTo(x, y)

این متد یک زیرمسیر جدید با نقطه داده‌شده ایجاد می‌کند.

۳

closePath()

این متد زیرمسیر فعلی را به عنوان بسته نشانه‌گذاری می‌کند و یک زیرمسیر جدید با نقطه‌ای یکسان با نقطه شروع و پایان زیرمسیر تازه بسته‌شده آغاز می‌کند.

۴

fill()

این متد زیرمسیرها را با استایل پرکردن فعلی توپر می‌کند.

۵

stroke()

این متد خطوط محیطی زیرمسیرها را با استایل خطی فعلی رسم می‌کند.

۶

quadraticCurveTo(cpx, cpy, x, y)

این متد نقطه داده‌شده را به مسیر فعلی اضافه می‌کند، به‌طوری که با یک منحنی بزیه درجه دوم و با نقطه کنترلی داده‌شده به نقطه قبلی وصل می‌شود.

پارامترهای x و y در متد quadraticCurveTo() مختصات نقطه پایانی هستند. پارامترهای cpx و cpy نیز مختصات نقطه کنترلی می‌باشند.

مثال

در ادامه یک مثال ساده آمده است که از متدهای ذکرشده در بالا برای رسم یک منحنی درجه دوم استفاده می‌کند.

<!DOCTYPE html>
<html>
<head>
   <style>
      #test {
         width: 100px;
         height:100px;
         margin: 0px auto;
      }
   </style>
   <script type="text/javascript">
      function drawShape(){
         
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            
            // Draw shapes
            ctx.beginPath();
            ctx.moveTo(75,25);
            ctx.quadraticCurveTo(25,25,25,62.5);
            ctx.quadraticCurveTo(25,100,50,100);
            ctx.quadraticCurveTo(50,120,30,125);
            ctx.quadraticCurveTo(60,120,65,100);
            ctx.quadraticCurveTo(125,100,125,62.5);
            ctx.quadraticCurveTo(125,25,75,25);
            ctx.stroke();
         } else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body id="test" onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

بوم HTML - استفاده از تصاویر

این آموزش نحوه وارد کردن یک تصویر خارجی به بوم و سپس نحوه طراحی روی آن تصویر با استفاده از متدهای زیر را نشان می‌دهد −

شماره متد و توضیحات
۱

beginPath()

این متد مسیر فعلی را بازنشانی می‌کند.

۲

moveTo(x, y)

این متد یک زیرمسیر جدید با نقطه داده‌شده ایجاد می‌کند.

۳

closePath()

این متد زیرمسیر فعلی را به عنوان بسته نشانه‌گذاری می‌کند و یک زیرمسیر جدید با نقطه‌ای یکسان با نقطه شروع و پایان زیرمسیر تازه بسته‌شده آغاز می‌کند.

۴

fill()

این متد زیرمسیرها را با استایل پرکردن فعلی توپر می‌کند.

۵

stroke()

این متد خطوط محیطی زیرمسیرها را با استایل خطی فعلی رسم می‌کند.

۶

drawImage(image, dx, dy)

این متد تصویر داده‌شده را روی بوم رسم می‌کند. در اینجا image ارجاعی به یک شیء تصویر یا بوم است. x و y مختصاتی روی بوم مقصد را تشکیل می‌دهند که تصویر ما باید در آنجا قرار گیرد.

مثال

در ادامه یک مثال ساده آمده است که از متدهای ذکرشده در بالا برای وارد کردن یک تصویر استفاده می‌کند.

<!DOCTYPE HTML>
<html>
<head>      
   <script type = "text/javascript">
      function drawShape() {
         
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext) {
         
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            
            // Draw shapes
            var img = new Image();
            img.src = '/html/images/backdrop.jpg';            
            img.onload = function() {
               ctx.drawImage(img,0,0);
               ctx.beginPath();
               
               ctx.moveTo(30,96);
               ctx.lineTo(70,66);
               
               ctx.lineTo(103,76);
               ctx.lineTo(170,15);
               
               ctx.stroke();
            }
         } else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>   
<body onload = "drawShape();">
   <canvas id = "mycanvas"></canvas>
</body>  
</html>

بوم HTML - ایجاد گرادیان‌ها (Gradients)

بوم HTML به ما امکان می‌دهد تا با استفاده از متدهای زیر، اشکال را با گرادیان‌های خطی و شعاعی توپر کرده یا دور آن‌ها را خط بکشیم −

شماره متد و توضیحات
۱

addColorStop(offset, color)

این متد یک ایستگاه رنگی (color stop) با رنگ داده‌شده در انحراف (offset) تعیین‌شده به گرادیان اضافه می‌کند. در اینجا 0.0 انحراف در یک انتهای گرادیان و 1.0 انحراف در انتهای دیگر است.

۲

createLinearGradient(x0, y0, x1, y1)

این متد یک شیء CanvasGradient بازمی‌گرداند که نشان‌دهنده یک گرادیان خطی است که در طول خط مشخص‌شده با مختصات داده‌شده توسط آرگومان‌ها رنگ‌آمیزی می‌کند. چهار آرگومان نشان‌دهنده نقطه شروع (x1,y1) و نقطه پایان (x2,y2) گرادیان هستند.

۳

createRadialGradient(x0, y0, r0, x1, y1, r1)

این متد یک شیء CanvasGradient بازمی‌گرداند که نشان‌دهنده یک گرادیان شعاعی است که در طول مخروط مشخص‌شده توسط دایره‌های معرفی‌شده با آرگومان‌ها رنگ‌آمیزی می‌کند. سه آرگومان اول دایره‌ای با مختصات (x1,y1) و شعاع r1 را تعریف می‌کنند و سه آرگومان دوم دایره‌ای با مختصات (x2,y2) و شعاع r2 را مشخص می‌سازند.

مثال - گرادیان خطی

در ادامه یک مثال ساده آمده است که از متدهای ذکرشده در بالا برای ایجاد گرادیان خطی استفاده می‌کند.

<!DOCTYPE html>
<html>
<head>
   <style>
      #test {
         width:100px;
         height:100px;
         margin:0px auto;
      }
   </style>
   <script type="text/javascript">
      function drawShape(){
         
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            
            // Create Linear Gradients
            var lingrad = ctx.createLinearGradient(0,0,0,150);
            lingrad.addColorStop(0, '#00ABEB');
            lingrad.addColorStop(0.5, '#fff');
            lingrad.addColorStop(0.5, '#66CC00');
            lingrad.addColorStop(1, '#fff');
            var lingrad2 = ctx.createLinearGradient(0,50,0,95);
            lingrad2.addColorStop(0.5, '#000');
            lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
            
            // assign gradients to fill and stroke styles
            ctx.fillStyle = lingrad;
            ctx.strokeStyle = lingrad2;
            
            // draw shapes
            ctx.fillRect(10,10,130,130);
            ctx.strokeRect(50,50,50,50);
         } else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body id="test" onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

مثال - گرادیان شعاعی

در ادامه یک مثال ساده آمده است که از متدهای ذکرشده در بالا برای ایجاد گرادیان شعاعی استفاده می‌کند.

<!DOCTYPE html>
<html>
<head>
   <style>
      #test {
         width: 100px;
         height: 100px;
         margin: 0px auto;
      }
   </style>
   <script type="text/javascript">
      function drawShape() {
         
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext) {
            
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            
            // Create gradients
            var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
            radgrad.addColorStop(0, '#A7D30C');
            radgrad.addColorStop(0.9, '#019F62');
            radgrad.addColorStop(1, 'rgba(1,159,98,0)');
            
            var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
            radgrad2.addColorStop(0, '#FF5F98');
            radgrad2.addColorStop(0.75, '#FF0188');
            radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
            
            var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
            radgrad3.addColorStop(0, '#00C9FF');
            radgrad3.addColorStop(0.8, '#00B5E2');
            radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
            
            var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
            radgrad4.addColorStop(0, '#F4F201');
            radgrad4.addColorStop(0.8, '#E4C700');
            radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
            
            // draw shapes
            ctx.fillStyle = radgrad4;
            ctx.fillRect(0, 0, 150, 150);
            
            ctx.fillStyle = radgrad3;
            ctx.fillRect(0, 0, 150, 150);
            
            ctx.fillStyle = radgrad2;
            ctx.fillRect(0, 0, 150, 150);
            ctx.fillStyle = radgrad;
            ctx.fillRect(0, 0, 150, 150);
         } 
         else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body id="test" onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

بوم HTML - استایل‌ها و رنگ‌ها

بوم HTML دو ویژگی مهم زیر را برای اعمال رنگ‌ها به یک شکل ارائه می‌دهد −

شماره متد و توضیحات
۱

fillStyle

این ویژگی نشان‌دهنده رنگ یا استایلی است که برای داخل اشکال استفاده می‌شود.

۲

strokeStyle

این ویژگی نشان‌دهنده رنگ یا استایلی است که برای خطوط اطراف اشکال استفاده می‌شود.

به طور پیش‌فرض، رنگ خط و پرکردن روی مشکی تنظیم شده است که مقدار رنگ CSS آن #000000 می‌باشد.

مثال - fillStyle

در ادامه یک مثال ساده آمده است که از ویژگی fillStyle ذکرشده در بالا برای ایجاد یک الگوی زیبا استفاده می‌کند.

<!DOCTYPE html>
<html>
<head>
   <style>
      #test {
         width: 100px;
         height:100px;
         margin: 0px auto;
      }
   </style>
   
   <script type="text/javascript">
      function drawShape(){
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            
            // Create a pattern
            for (var i=0;i<7;i++){
               for (var j=0;j<7;j++){
                  ctx.fillStyle='rgb(' + Math.floor(255-20.5*i)+ ','+ Math.floor(255 - 42.5*j) + ',255)';
                  ctx.fillRect( j*25, i* 25, 55, 55 );
               }
            }
         } 
         else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body id="test" onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

مثال - strokeStyle

در ادامه یک مثال ساده آمده است که از ویژگی strokeStyle برای ایجاد یک الگوی زیبای دیگر استفاده می‌کند.

<!DOCTYPE html>
<html>
<head>
   <style>
      #test {
         width: 100px;
         height:100px;
         margin: 0px auto;
      }
   </style>
   <script type="text/javascript">
      function drawShape(){
         
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            
            // Create a pattern
            for (var i=0;i<10;i++){
               for (var j=0;j<10;j++){
                  ctx.strokeStyle='rgb(255,'+ Math.floor(50-2.5*i)+','+ Math.floor(155 - 22.5 * j ) + ')';
                  ctx.beginPath();
                  ctx.arc(1.5+j*25, 1.5 + i*25,10,10,Math.PI*5.5, true);
                  ctx.stroke();
               }
            }
         } 
         else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body id="test" onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

بوم HTML - متن و فونت‌ها

بوم HTML قابلیت‌هایی برای ایجاد متن با استفاده از فونت‌ها و ویژگی‌های مختلف متن که در زیر فهرست شده‌اند، فراهم می‌کند −

شماره ویژگی و توضیحات
۱

font [ = value ]

این ویژگی تنظیمات فونت فعلی را بازمی‌گرداند و برای تغییر فونت قابل تنظیم است.

۲

textAlign [ = value ]

این ویژگی تنظیمات چینش فعلی متن را بازمی‌گرداند و برای تغییر چینش قابل تنظیم است. مقادیر ممکن عبارتند از: start، end، left، right و center.

۳

textBaseline [ = value ]

این ویژگی تنظیمات چینش خط پایه (baseline) فعلی را بازمی‌گرداند و برای تغییر چینش خط پایه قابل تنظیم است. مقادیر ممکن عبارتند از: top، hanging، middle، alphabetic، ideographic و bottom.

۴

fillText(text, x, y [, maxWidth ] )

این ویژگی متن داده‌شده را در موقعیت تعیین‌شده با مختصات x و y توپر می‌نویسد.

۵

strokeText(text, x, y [, maxWidth ] )

این ویژگی خطوط محیطی متن داده‌شده را در موقعیت تعیین‌شده با مختصات x و y رسم می‌کند.

مثال

در ادامه یک مثال ساده آمده است که از ویژگی‌های ذکرشده در بالا برای رسم یک متن استفاده می‌کند −

<!DOCTYPE html>
<html>
<head>
   <style>
      #test {
         width: 100px;
         height:100px;
         margin: 0px auto;
      }
   </style>
   <script type="text/javascript">
      function drawShape(){
         
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = '#00F';
            ctx.font = 'Italic 30px Sans-Serif';
            ctx.textBaseline = 'Top';
            ctx.fillText  ('Hello world!', 40, 100);
            ctx.font = 'Bold 30px Sans-Serif';
            ctx.strokeText('Hello world!', 40, 50);
         } else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body id="test" onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

بوم HTML - پترن و سایه

ایجاد پترن (Pattern)

متد زیر برای ایجاد یک پترن روی بوم مورد نیاز است −

شماره متد و توضیحات
۱

createPattern(image, repetition)

این متد از یک تصویر برای ایجاد پترن استفاده می‌کند. آرگومان دوم می‌تواند رشته‌ای با یکی از مقادیر زیر باشد: repeat، repeat-x، repeat-y و no-repeat. اگر رشته خالی یا null تعیین شود، repeat در نظر گرفته می‌شود.

مثال

در ادامه یک مثال ساده آمده است که از متد ذکرشده در بالا برای ایجاد یک پترن زیبا استفاده می‌کند.

<!DOCTYPE html>
<html>
<head>
   <style>
      #test {
         width:100px;
         height:100px;
         margin: 0px auto;
      }
   </style>
   <script type="text/javascript">
      function drawShape(){
         
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            
            // create new image object to use as pattern
            var img = new Image();
            img.src = '/html/images/pattern.jpg';
            img.onload = function(){
               
               // create pattern
               var ptrn = ctx.createPattern(img,'repeat');
               ctx.fillStyle = ptrn;
               ctx.fillRect(0,0,150,150);
            }
         } 
         else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body id="test" onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

با این فرض که پترن زیر را داریم −

pattern

ایجاد سایه‌ها

بوم HTML قابلیت‌هایی برای ایجاد سایه‌های زیبا در اطراف ترسیمات فراهم می‌کند. تمام عملیات ترسیم تحت تأثیر چهار ویژگی عمومی سایه قرار می‌گیرند.

شماره ویژگی و توضیحات
۱

shadowColor [ = value ]

این ویژگی رنگ سایه فعلی را بازمی‌گرداند و برای تغییر رنگ سایه قابل تنظیم است.

۲

shadowOffsetX [ = value ]

این ویژگی جابه‌جایی سایه در راستای X را بازمی‌گرداند و برای تغییر میزان جابه‌جایی سایه در افق قابل تنظیم است.

۳

shadowOffsetY [ = value ]

این ویژگی جابه‌جایی سایه در راستای Y را بازمی‌گرداند و برای تغییر میزان جابه‌جایی سایه در عمود قابل تنظیم است.

۴

shadowBlur [ = value ]

این ویژگی میزان محوشدگی (تاری) اعمال‌شده روی سایه‌ها را بازمی‌گرداند و برای تغییر سطح تاری قابل تنظیم است.

مثال

در ادامه یک مثال ساده آمده است که از ویژگی‌های ذکرشده در بالا برای رسم یک سایه استفاده می‌کند.

<!DOCTYPE html>
<html>
<head>
   <style>
      #test {
         width: 100px;
         height:100px;
         margin: 0px auto;
      }
   </style>
   
   <script type="text/javascript">
      function drawShape(){
         
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            ctx.shadowOffsetX = 2;
            ctx.shadowOffsetY = 2;
            ctx.shadowBlur = 2;
            ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
            ctx.font = "20px Times New Roman";
            ctx.fillStyle = "Black";
            ctx.fillText("This is shadow test", 5, 30);
         } else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body id="test" onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

بوم HTML - ذخیره و بازیابی وضعیت‌ها

بوم HTML دو متد مهم برای ذخیره و بازیابی وضعیت‌های بوم ارائه می‌دهد. وضعیت رسم بوم در واقع یک تصویر لحظه‌ای از تمام استایل‌ها و تبدیل‌هایی است که اعمال شده‌اند و شامل موارد زیر است −

  • تبدیل‌ها مانند جابه‌جایی (translate)، چرخش (rotate) و تغییر مقیاس (scale) و غیره.

  • ناحیه برش فعلی (clipping region).

  • مقادیر فعلی ویژگی‌های زیر − strokeStyle، fillStyle، globalAlpha، lineWidth، lineCap، lineJoin، miterLimit، shadowOffsetX، shadowOffsetY، shadowBlur، shadowColor، globalCompositeOperation، font، textAlign، textBaseline.

وضعیت‌های بوم هر بار که متد save فراخوانی می‌شود روی یک پشته (stack) ذخیره می‌شوند، و آخرین وضعیت ذخیره‌شده هر بار که متد restore فراخوانی می‌شود از پشته بازگردانده می‌شود.

شماره متد و توضیحات
۱

save()

این متد وضعیت فعلی را به داخل پشته می‌راند (push می‌کند).

۲

restore()

این متد بالاترین وضعیت پشته را خارج می‌کند (pop می‌کند) و محیط را به آن وضعیت بازیابی می‌نماید.

مثال

در ادامه یک مثال ساده آمده است که از متدهای ذکرشده در بالا استفاده می‌کند تا نشان دهد چگونه restore فراخوانی می‌شود تا وضعیت اصلی بازیابی گردد و مستطیل آخر دوباره به رنگ مشکی رسم شود.

<!DOCTYPE html>
<html>
<head>
   <style>
      #test {
         width: 100px;
         height:100px;
         margin: 0px auto;
      }
   </style>
   <script type="text/javascript">
      function drawShape(){
         
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            
            //  draw a rectangle with default settings
            ctx.fillRect(0,0,150,150);
            
            //  Save the default state
            ctx.save();
            // Make changes to the settings
            ctx.fillStyle = '#66FFFF'
            ctx.fillRect( 15,15,120,120);
            
            // Save the current state
            ctx.save();
            // Make the new changes to the settings
            ctx.fillStyle = '#993333'
            ctx.globalAlpha = 0.5;
            ctx.fillRect(30,30,90,90);
            // Restore previous state
            ctx.restore();
            
            // Draw a rectangle with restored settings
            ctx.fillRect(45,45,60,60);
            // Restore original state
            ctx.restore();
            
            // Draw a rectangle with restored settings
            ctx.fillRect(40,40,90,90);
         } else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body id="test" onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

بوم HTML - انتقال و جابه‌جایی (Translation)

بوم HTML متد translate(x, y) را ارائه می‌دهد که برای جابه‌جا کردن بوم و مبدأ مختصات آن به نقطه‌ای دیگر در شبکه (grid) استفاده می‌شود.

در اینجا آرگومان x مقداری است که بوم به سمت چپ یا راست جابه‌جا می‌شود، و y مقداری است که بوم به سمت بالا یا پایین منتقل می‌گردد.

مثال

در ادامه یک مثال ساده آمده است که از متد بالا برای رسم اسپیروگراف‌های (Spirographs) مختلف استفاده می‌کند −

<!DOCTYPE html>
<html>
<head>
   <style>
      #test {
         width:100px;
         height:100px;
         margin:0px auto;
      }
   </style>
   <script type="text/javascript">
      function drawShape(){
         
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            ctx.fillRect(0,0,300,300);
            
            for (i=0;i<3;i++) {
               for (j=0;j<3;j++) {
                  ctx.save();
                  ctx.strokeStyle = "#FF0066";
                  ctx.translate(50+j*100,50+i*100);
                  drawSpirograph(ctx,10*(j+3)/(j+2),-2*(i+3)/(i+1),10);
                  ctx.restore();
               }
            }
         } 
         else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
      function drawSpirograph(ctx,R,r,O){
         var x1 = R-O;
         var y1 = 0;
         var i  = 1;
         ctx.beginPath();
         ctx.moveTo(x1,y1);
         do {
            if (i>20000) break;
               var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
               var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
               ctx.lineTo(x2,y2);
               x1 = x2;
               y1 = y2;
               i++;
         } while (x2 != R-O && y2 != 0 );
         ctx.stroke();
      }
   </script>
</head>
<body id="test" onload="drawShape();">
   <canvas id="mycanvas" width="400" height="400"></canvas>
</body>
</html>

بوم HTML - چرخش (Rotation)

بوم HTML متد rotate(angle) را ارائه می‌دهد که برای چرخش بوم حول مبدأ فعلی استفاده می‌شود.

این متد تنها یک پارامتر می‌گیرد و آن زاویه‌ای است که بوم به اندازه‌اش می‌چرخد. این چرخش موافق جهت عقربه‌های ساعت و بر حسب رادیان اندازه‌گیری می‌شود.

مثال

در ادامه یک مثال ساده آمده است که در آن دو حلقه را اجرا می‌کنیم؛ حلقه اول تعداد حلقه‌ها (رینگ‌ها) را تعیین می‌کند و حلقه دوم تعداد نقاط رسم‌شده در هر حلقه را مشخص می‌سازد.

<!DOCTYPE html>
<html>
<head>
   <style>
      #test {
         width: 100px;
         height:100px;
         margin: 0px auto;
      }
   </style>
   <script type="text/javascript">
      function drawShape(){
         
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            ctx.translate(100,100);
            for (i=1; i<7; i++){
               ctx.save();
               ctx.fillStyle = 'rgb('+(51*i)+','+(200-51*i)+',0)';
               for (j=0; j < i*6; j++){
                  ctx.rotate(Math.PI*2/(i*6));
                  ctx.beginPath();
                  ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
                  ctx.fill();
               }
               ctx.restore();
            }
         } else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body id="test" onload="drawShape();">
   <canvas id="mycanvas" width="400" height="400"></canvas>
</body>
</html>

بوم HTML - تغییر مقیاس (Scaling)

بوم HTML متد scale(x, y) را ارائه می‌دهد که برای افزایش یا کاهش واحدهای شبکه (grid) بوم استفاده می‌شود. از این متد می‌توان برای رسم اشکال و تصاویر بیتی کوچک‌شده یا بزرگ‌شده استفاده کرد.

این متد دو پارامتر می‌گیرد که در آن x ضریب مقیاس در جهت افقی و y ضریب مقیاس در جهت عمودی است. هر دو پارامتر باید اعداد مثبت باشند.

مقادیر کوچک‌تر از 1.0 اندازه واحد را کاهش می‌دهند و مقادیر بزرگ‌تر از 1.0 اندازه واحد را افزایش می‌دهند. تنظیم ضریب مقیاس روی دقیقاً 1.0 هیچ تأثیری بر اندازه واحد ندارد.

مثال

در ادامه یک مثال ساده آمده است که از تابع اسپیروگراف برای رسم نه شکل با ضریب‌های مقیاس مختلف استفاده می‌کند.

<!DOCTYPE html>
<html>
<head>
   <script type="text/javascript">
      function drawShape(){
         
         // Get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // Use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            ctx.strokeStyle = "#fc0";
            ctx.lineWidth = 1.5;
            ctx.fillRect(0,0,300,300);
            
            // Uniform scaling
            ctx.save()
            ctx.translate(50,50);
            drawSpirograph(ctx,22,6,5);
            ctx.translate(100,0);
            ctx.scale(0.75,0.75);
            drawSpirograph(ctx,22,6,5);
            ctx.translate(133.333,0);
            ctx.scale(0.75,0.75);
            drawSpirograph(ctx,22,6,5);
            ctx.restore();
            
            // Non uniform scaling (y direction)
            ctx.strokeStyle = "#0cf";
            ctx.save()
            ctx.translate(50,150);
            ctx.scale(1,0.75);
            drawSpirograph(ctx,22,6,5);
            ctx.translate(100,0);
            ctx.scale(1,0.75);
            drawSpirograph(ctx,22,6,5);
            ctx.translate(100,0);
            ctx.scale(1,0.75);
            drawSpirograph(ctx,22,6,5);
            ctx.restore();
            
            // Non uniform scaling (x direction)
            ctx.strokeStyle = "#cf0";
            ctx.save()
            ctx.translate(50,250);
            ctx.scale(0.75,1);
            drawSpirograph(ctx,22,6,5);
            ctx.translate(133.333,0);
            ctx.scale(0.75,1);
            drawSpirograph(ctx,22,6,5);
            ctx.translate(177.777,0);
            ctx.scale(0.75,1);
            drawSpirograph(ctx,22,6,5);
            ctx.restore();
         } else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
      function drawSpirograph(ctx,R,r,O){
         var x1 = R-O;
         var y1 = 0;
         var i  = 1;
         ctx.beginPath();
         ctx.moveTo(x1,y1);
         do {
            if (i>20000) break;
               var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
               var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
               ctx.lineTo(x2,y2);
               x1 = x2;
               y1 = y2;
               i++;
         }
         while (x2 != R-O && y2 != 0 );
            ctx.stroke();
      }
   </script>
</head>
<body onload="drawShape();">
   <canvas id="mycanvas" width="400" height="400"></canvas>
</body>
</html>

بوم HTML - تبدیل‌ها (Transforms)

بوم HTML متدهایی را ارائه می‌دهد که اجازه اعمال تغییرات مستقیم روی ماتریس تبدیل را می‌دهند. ماتریس تبدیل در ابتدا باید ماتریس همانی (identity transform) باشد. سپس می‌توان آن را با استفاده از متدهای تبدیل تنظیم کرد.

شماره متد و توضیحات
۱

transform(m11, m12, m21, m22, dx, dy)

این متد ماتریس تبدیل را برای اعمال ماتریس داده‌شده توسط آرگومان‌ها تغییر می‌دهد.

۲

setTransform(m11, m12, m21, m22, dx, dy)

این متد ماتریس تبدیل را به ماتریس داده‌شده توسط آرگومان‌ها تغییر می‌دهد.

متد transform (m11, m12, m21, m22, dx, dy) باید ماتریس تبدیل فعلی را در ماتریسیضرب کند که با موارد زیر توصیف می‌شود −

m11     m21     dx
m12     m22     dy
0       0       1

متد setTransform(m11, m12, m21, m22, dx, dy) باید تبدیل فعلی را به ماتریس همانی بازنشانی کند و سپس متد transform(m11, m12, m21, m22, dx, dy) را با همان آرگومان‌ها فراخوانی نماید.

مثال

در ادامه یک مثال ساده آمده است که از متدهای transform() و setTransform() استفاده می‌کند −

<!DOCTYPE html>
<html>
<head>
   <script type="text/javascript">
      function drawShape(){
         
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            
            var sin = Math.sin(Math.PI/6);
            var cos = Math.cos(Math.PI/6);
            
            ctx.translate(200, 200);
            var c = 0;
            
            for (var i=0; i <= 12; i++) {
               c = Math.floor(255 / 12 * i);
               ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
               ctx.fillRect(0, 0, 100, 100);
               ctx.transform(cos, sin, -sin, cos, 0, 0);
            }
            ctx.setTransform(-1, 0, 0, 1, 200, 200);
            ctx.fillStyle = "rgba(100, 100, 255, 0.5)";
            ctx.fillRect(50, 50, 100, 100);
         } 
         else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body onload="drawShape();">
   <canvas id="mycanvas" width="400" height="400"></canvas>
</body>
</html>

بوم HTML - ترکیب‌سازی (Composition)

بوم HTML ویژگی ترکیب‌سازی globalCompositeOperation را ارائه می‌دهد که تمامی عملیات رسم را تحت تأثیر قرار می‌دهد.

ما می‌توانیم همان‌طور که در مثال زیر نشان داده شده است، با استفاده از ویژگی globalCompositeOperation اشکال جدیدی را پشت اشکال موجود رسم کنیم، نواحی خاصی را ماسک کنیم، یا بخش‌هایی را از بوم پاک کنیم.

مقادیر زیر را می‌توان برای globalCompositeOperation تنظیم کرد −

شماره ویژگی و توضیحات
۱

source-over

این تنظیم پیش‌فرض است و اشکال جدید را روی محتوای موجود بوم رسم می‌کند.

۲

source-in

شکل جدید تنها در جایی رسم می‌شود که هم شکل جدید و هم بوم مقصد هم‌پوشانی داشته باشند. همه بخش‌های دیگر شفاف می‌شوند.

۳

source-out

شکل جدید در جایی رسم می‌شود که با محتوای موجود بوم هم‌پوشانی ندارد.

۴

source-atop

شکل جدید تنها در جایی رسم می‌شود که با محتوای موجود بوم هم‌پوشانی دارد.

۵

lighter

در جایی که هر دو شکل هم‌پوشانی دارند، رنگ با جمع کردن مقادیر رنگی تعیین می‌شود.

۶

xor

اشکال در جایی که هر دو هم‌پوشانی دارند شفاف می‌شوند و در بقیه جاها به صورت عادی رسم می‌گردند.

۷

destination-over

اشکال جدید پشت محتوای موجود بوم رسم می‌شوند.

۸

destination-in

محتوای موجود بوم در جایی که هم شکل جدید و هم محتوای موجود هم‌پوشانی دارند حفظ می‌شود. همه بخش‌های دیگر شفاف می‌شوند.

۹

destination-out

محتوای موجود در جایی که با شکل جدید هم‌پوشانی ندارد حفظ می‌شود.

۱۰

destination-atop

بوم موجود تنها در جایی حفظ می‌شود که با شکل جدید هم‌پوشانی دارد. شکل جدید پشت محتوای بوم رسم می‌شود.

۱۱

darker

در جایی که هر دو شکل هم‌پوشانی دارند، رنگ با تفریق مقادیر رنگی تعیین می‌شود.

مثال

در ادامه یک مثال ساده آمده است که از ویژگی globalCompositeOperation برای ایجاد تمامی ترکیب‌های ممکن استفاده می‌کند −

<!DOCTYPE html>
<html>
<head>
   <script type="text/javascript">
      var compositeTypes = [
         'source-over','source-in','source-out','source-atop',
         'destination-over','destination-in','destination-out',
         'destination-atop','lighter','darker','copy','xor'
      ];
      function drawShape(){
         for (i=0;i<compositeTypes.length;i++){
            var label = document.createTextNode(compositeTypes[i]);
            document.getElementById('lab'+i).appendChild(label);
            var ctx = document.getElementById('tut'+i).getContext('2d');
            
            // draw rectangle
            ctx.fillStyle = "#FF3366";
            ctx.fillRect(15,15,70,70);
            
            // set composite property
            ctx.globalCompositeOperation = compositeTypes[i];
            
            // draw circle
            ctx.fillStyle = "#0066FF";
            ctx.beginPath();
            ctx.arc(75,75,35,0,Math.PI*2,true);
            ctx.fill();
         }
      }
   </script>
</head>
<body onload="drawShape();">
   <table border="1" align="center">
      
      <tr>
         <td><canvas id="tut0" width="125" height="125"></canvas><br/>
            <label id="lab0"></label>
         </td>         
         <td><canvas id="tut1" width="125" height="125"></canvas><br/>
            <label id="lab1"></label>
         </td>         
         <td><canvas id="tut2" width="125" height="125"></canvas><br/>
            <label id="lab2"></label>
         </td>
      </tr>
      
      <tr>
         <td><canvas id="tut3" width="125" height="125"></canvas><br/>
            <label id="lab3"></label>
         </td>
         
         <td><canvas id="tut4" width="125" height="125"></canvas><br/>
            <label id="lab4"></label>
         </td>
         <td><canvas id="tut5" width="125" height="125"></canvas><br/>
            <label id="lab5"></label>
         </td>
      </tr>
      
      <tr>
         <td><canvas id="tut6" width="125" height="125"></canvas><br/>
            <label id="lab6"></label>
         </td>
         <td><canvas id="tut7" width="125" height="125"></canvas><br/>
            <label id="lab7"></label>
         </td>
         <td><canvas id="tut8" width="125" height="125"></canvas><br/>
            <label id="lab8"></label>
         </td>
      </tr>
      
      <tr>
         <td><canvas id="tut9" width="125" height="125"></canvas><br/>
            <label id="lab9"></label>
         </td>
         <td><canvas id="tut10" width="125" height="125"></canvas><br/>
            <label id="lab10"></label>
         </td>
         <td><canvas id="tut11" width="125" height="125"></canvas><br/>
            <label id="lab11"></label>
         </td>
      </tr>
   </table>
</body>
</html>

بوم HTML - پویانمایی‌ها (Animations)

بوم HTML متدهای لازم برای رسم یک تصویر و پاک کردن کامل آن را فراهم می‌کند. ما می‌توانیم از جاوااسکریپت برای شبیه‌سازی یک انیمیشن خوب روی بوم HTML استفاده کنیم.

در ادامه دو متد مهم جاوااسکریپت آمده است که برای انیمیشن دادن به یک تصویر روی بوم استفاده می‌شوند −

شماره متد و توضیحات
۱

setInterval(callback, time);

این متد کدهای داده‌شده را به‌طور متناوب پس از یک زمان مشخص بر حسب میلی‌ثانیه اجرا می‌کند.

۲

setTimeout(callback, time);

این متد کدهای داده‌شده را تنها یک‌بار پس از یک زمان مشخص بر حسب میلی‌ثانیه اجرا می‌کند.

مثال

در ادامه یک مثال ساده آمده است که یک تصویر کوچک را به طور تکراری می‌چرخاند −

<!DOCTYPE html>
<html>
<head>
   <script type="text/javascript">
      var pattern= new Image();
      function animate(){
         pattern.src = '/html/images/pattern.jpg';
         setInterval(drawShape, 100);
      }
      function drawShape(){
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            
            ctx.fillStyle = 'rgba(0,0,0,0.4)';
            ctx.strokeStyle = 'rgba(0,153,255,0.4)';
            ctx.save();
            ctx.translate(150,150);
            
            var time = new Date();
            ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ( (2*Math.PI)/6000)*time.getMilliseconds() );
            ctx.translate(0,28.5);
            ctx.drawImage(pattern,-3.5,-3.5);
            ctx.restore();
         } 
         else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body onload="animate();">
   <canvas id="mycanvas" width="400" height="400"></canvas>
</body>
</html>

پیشرفت مطالعه: وضعیت خوانده‌شدن این درس فقط در همین مرورگر ذخیره می‌شود؛ بدون نیاز به حساب کاربری.