32
تشکر

آموزش کار با Canvas

آموزش کار با Canvas

آموزش کار با Canvas

 

عنصر Canvas این امکان را توسعه دهندگان وب میدهد که گرافیک سایت خودشان را در سایت طراحی بکنند مانند یک عکس و حتی بیشتر. از مزایای آن میتوان به کاهش درخواست های HTTP به دلیل کم کردن استفاده شما از عکس و کاهش زمان بارگذاری وب سایت اشاره کرد. همچنین این عنصر به شما این امکان را میدهد که گرافیک های سفارشی مثل چارت ها و نمودار ها را به راحتی در سمت کلاینت طراحی بکنید. پیش از این, این کارها در سمت سرور انجام میشد.

 


عنصر Canvas

عصنر Canvas دارای خاصیت های id و height و width میباشد. خب اولین Canvas خود را میتوانید به صورت زیر بنویسید.

<canvas id="myCanvas" width="400" height="300" >
    Your web browser deos not support canvas!
</canvas>

نوشته داخل عنصر Canvas در صورتی ظاهر خواهد شد که مرورگر کاربر از Canvas پشتیبانی نکند. برای پیداکردن پشتیانی انواع مرورگرها به اینجا مراجعه کنید.

 


تنطیمات Canvas

برای طراحی در Canvas شما باید از JavaScript         استفاده کنید. اولین چیزی که باید بدانید این است که یک عنصر را در جاوا اسکریپت چگونه باید انتخاب کنید. این کار با استفاده از دستور getElementById انجام میدهیم. که در اون باید نام ID عنصر مورد نظر رو بنویسیم.

var canvas=document.getElementById('myCanvas');

برای فهمیدن اینکه آیا مرورگر کاربر از Canvas پشتیبانی میکند میتوان از تابع getContext استفاده کرد.

if(canvas.getContext){
				
}

برای شروع طراحی باید مشخص کنیم که نوع طراحی ما دو بعدی است یا سه بعدی. برای اینکار نیز از تابع getContext استفاده میکنیم. همانطور که در کد زیر میبینید ما نتیجه را در متغیر ctx ذخیره کردیم چون برای ترسیم اشکال باید از این متغیر استفاده کنیم.

var ctx=canvas.getContext('2d');

با استفاده از کدهای بالا ما الان آماده طراحی هستیم فقط باید کدهای زیر را در داخل تابع window.onload گذاشت تا زمانی که صفحه لود شد کدهای زیر نیز اجرا شود. کدهای زیر را نیز همانطور که خودتان میدانید باید داخل تگ script و در head قرار بدید.

window.onload=function(){
			
    var canvas=document.getElementById('myCanvas');
			
    if(canvas.getContext){
        var ctx=canvas.getContext('2d');				
    }	
}

 


کشیدن مستطیل

اولین شکلی که قرار است با Canvas بکشیم مستطیل است. با استفاده از تابع fillRect(x, y, width, height) میتوان یک مستطیل کشید. اما ابتدا باید با استفاده از تابع fillStyle رنگ مستطیل را مشخص کرد.

ctx.fillStyle="#000000";
ctx.fillRect(10,10,100,100);

کل کدهایی که تا به حال نوشتیم را در زیر میتوانید ببینید.

<!DOCTYPE html>
<html>
<head>
    <title>Canvas</title>
    <script type="text/javascript" >
        window.onload=function(){
			
            var canvas=document.getElementById('myCanvas');
			
            if(canvas.getContext){
                var ctx=canvas.getContext('2d');		
				
                ctx.fillStyle="#000000";
                ctx.fillRect(10,10,100,100);
            }	
        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="400" height="300" >
        Your web browser deos not support canvas!
    </canvas>
</body>
</html>

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

ctx.strokeRect(10,10,100,100);

برای پاک کردن یک قسمت میتوان از clearRect استفاده کرد.

ctx.fillStyle="#000000"; 
ctx.fillRect(10,10,100,100); 
ctx.clearRect(50,50,50,50);

 


کشیدن خط

برای کشیدن خط ابتدا باید با استفاده از تابع beginPath به مرورگر بگویید که قصد ایجاد کردن یک خط را دارید. سپس توسط تابع moveTo ابتدای خط مورد نظر را مشخص میکنید. سپس توسط تابع lineTo انتهای خط را مشخص میکنید. همچنین توسط تابع lineWidth باید عرض خط را مشخص کنید و توسط تابع strokeStyle رنگ خط را مشخص میکنید. تا اینجا خط مورد نظر شما روی صفحه دیده نمیشود و در آخر شما باید توسط تابع stroke خط را نمایش میدهید.

ctx.beginPath();
ctx.moveTo(200,10);
ctx.lineTo(200,200);
ctx.lineWidth=2;
ctx.strokeStyle="#d921bf";
ctx.stroke();

خب شما میتوانید باز هم با استفاده از تابع lineTo خط بکشید که ابتدای آن انتهای آخرین خط کشیده شده است. برای مثال ما در کد زیر دو خط را کشیده ایم.

ctx.beginPath();
ctx.moveTo(200,10);
ctx.lineTo(200,200);
ctx.lineTo(10,10);
ctx.lineWidth=2;
ctx.strokeStyle="#d921bf";
ctx.stroke();

ما دو خط را رسم کردیم. شما میتوانید هر بار که بخواهید از تابع lineTo استفاده کنید. و برای وصل کردن انتهای آخرین خط رسم شده به ابتدای اولین خط رسم شده میتوان از تابع closePath استفاده کرد.

ctx.beginPath();
ctx.moveTo(200,10);
ctx.lineTo(200,200);
ctx.lineTo(10,10);
ctx.lineTo(10,200);
ctx.closePath();
ctx.lineWidth=2;
ctx.strokeStyle="#d921bf";
ctx.stroke();

 


کشیدن دایره و کمان

در واقع تابعی برای کشیدن دایره وجود ندارد. برای اینکار باید از تابع arc استفاده کرد. در واقع ما یک کمان را به شکل دایره میکشیم. تابع arc(x, y, radius, startAngle, endAngle, anticlockwise) دارای پارامترهای ذکر شده است. پارامترهای x , y مرکز دایره را مشخص میکند که در کجای صفحه باشد. پارامتر radius میزان شعاع را مشخص میکند. پارامترهای startAngle , endAngle شروع و پایان کمان را مشخص میکند که بر اساس رادیان است نه درجه.  و در آخر anticlickwise مشخص میکند آیا شکل درجهت عقربه های ساعت درست شود یا نه.

در کد زیر ابتدا ما به مرورگر میگوییم که قصد ایجاد یک دایره را داریم سپس توسط تابع arc مکان و درجه های دایره را مشخص میکنم(بر اساس رادیان). که چون درجه کمان اول صفر و درجه کمان دوم 360 درجه است یک دایره ایجاد میشود. در خط سوم با رنگ دایره را مشخص کردیم. و در انتها آن را در صفحه رسم میکنیم.

ctx.beginPath();
ctx.arc(300,150,50,0,Math.PI*2,false);
ctx.fillStyle="#2fde3c";
ctx.fill();

میتوان مانند مستطیل هم یک دایره تو خالی رسم کرد مانند زیر:

ctx.beginPath();
ctx.arc(300,150,60,0,Math.PI*2,false);
ctx.lineWidth=2;
ctx.strokeStyle="#2f74de";
ctx.stroke();

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

var degress=45;
var radians=(Math.PI / 180) * degress;

 


استایل های پیشرفته

حالا که ما کشیدن شکل های ابتدایی را فرا گرفتیم میتوانیم به قسمت های دیگر نیز بپردازیم.

 


گرادینت خطی(linear gradient)

برای کشیدن یک گرادینت به تابع createLinearGradient(x1,y1,x2,y2) احتیاج داریم. که این تابع یک canvasGradient را بر میگرداند که x1 , y1 ناحیه رنگ اول و  x2 , y2 ناحیه رنگ دوم را مشخص میکند. که این صفحه دو پارامتر را دریافت میکند که همان color-stop ها هستند. مقادیر هر مقدار که لازم باشد از color-stop ها استفاده کرد و مقادیر آنها باید بین یک و صفر باشد. برای مثال:

var myGradient=ctx.createLinearGradient(0,0,0,200);
myGradient.addColorStop(0, "#BABABA");
myGradient.addColorStop(1, "#636363");
ctx.fillStyle=myGradient;
ctx.fillRect(0,0,400,300);

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

 


سایه ها

چهار پروپرتی(Property) هستند که به شما در ایجاد سایه ها کمک میکنند. در زیر یک نمونه مستطیل با استفاده از سایه ها را میبینید.

ctx.shadowOffsetX=5;
ctx.shadowOffsetY=5;
ctx.shadowBlur=10;
ctx.shadowColor="rgba(0,0,0,0.5)";
				
ctx.fillStyle="#cc0000";
ctx.fillRect(150,180,200,100);

ما با استفاده از چهار پروپرتی بالا سایه را تولید کردیم اما از این چهار خط کد به بعد هر شکلی که در صفحه رسم کنیم دارای سایه خواهد بود. ولی ما میخواهیم فقط برای شی که خودمان میخواهیم این اتفاق بیافتد. در این صورت باید با استفاده از تابع save ابتدا کل شئ های Canvas را ذخیره کنیم کنیم. سپس مقادیر سایه ها و شکلی که میخواهیم دارای سایه شود را بنویسیم سپس تابع restore را فراخونی کنیم که دوباره شئ های درون Canvas برگردد.

ctx.save();
				
ctx.shadowOffsetX=5;
ctx.shadowOffsetY=5;
ctx.shadowBlur=10;
ctx.shadowColor="rgba(0,0,0,0.5)";
				
ctx.fillStyle="#cc0000";
ctx.fillRect(150,180,200,100);
				
ctx.restore();

 


چاپ متن

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

ctx.font="Bold 17px Arial";
ctx.textAlign="left";
ctx.fillStyle="#008600";
ctx.fillText("Aparnet.ir",315,20);

 


سخن پایانی

در این مقاله نسبتا طولانی سعی شد بر اصول اولیه کار با Canvas بحث شود. اما شما حتما میگویید که اینها که هیچ کدام انیمیشن ندارند!! خوب در آینده حتما در وارد مبحث بعدی خواهیم شد. برای اشتیاق بیشتر به این صفحه بروید و Angry Birds را در Canvas تجربه کنید.

آیا شما در پروژه بعدیتان از Canvas استفاده میکنید. در قسمت نظرات بگویید.

  • زکیه می‌گه:

    مطالبتون خیلی خوب بود . اگه میشه مطالب بیشتری در مورد canvas برام بفرستید برای پایان نامه ام لازم دارم.
    ممنون.

  • امین می‌گه:

    سلام خیلی ممنون از مطلب کاربردیت ، واقعا نیاز داشتم

    فقط یه سؤال ، با fillRect(10,10,100,100) میشه بگیم از چپ و بالا فاصله بگیره اگه بخوایم از راست و پایین فاصله بگیره باید چیکار کنیم؟

    • محسن شفیعی می‌گه:

      نمیشه، شما باید خودتون محاسبات رو انجام بدید که اینکار با گرفتن اطلاعات ارتفاع و عرض canvas انجام میشه.

  • Ali Amini می‌گه:

    سلام
    واقعا مطلب مفیدی بود.
    خسته نباشی داداش :)

  • سعید وکیلی می‌گه:

    سلام
    من هم می خوام محتویات canvas را ذخیره کنم و بعد قابل ویرایش باشه آیا امکانی برای این کار وجود داره؟؟؟

  • سمیه می‌گه:

    با سلام
    من می خوام محتوی canvas رو ذخیره کنم و هر زمان خواستم بتونم اون رو ویرایش کنم، چطور می تونم این کار رو انجام بدم

    با تشکر


  • نظرات این مطلب بسته است.