بخش های اصلی

آموزش HTML 5

آموزش HTML 5 - آموزش Canvas

عنصر canvas برای کشیدن گرافیک هایِ صفحه های وب به کار میره.

canvas چیه؟

عنصر HTML5 Canvas برای کشیدن گرافیک ها توسط اسکریپت نویسی (معمولاً جاوا اسکریپت) روی صفحه ی وب به کار میره. canvas دراصل توسط Apple برای ویجت های داشبوردِ سیستم عاملِ Mac (Mac OS Dashboard widgets) و گرافیک های power در مرورگر وبِ Safari معرفی شد. بعداً با Firefox، Google Chrome و Opera هم سازگار شد. در حال حاضر canvas یکی از specificationهای HTML5 برای نسلِ بعدیِ تکنولوژی های وبه.

برخی مرورگرهای قدیمی تر از عنصر <canvas> پشتیبانی نمی کنن ولی نسخه های اخیرِ تمام مرورگرهای مطرح مثل IE9+، Firefox، Chrome، Safari و Opera از این عنصر پشتیبانی می کنن. بصورت پیش فرض عنصر canvas دارای 300px عرض و 150px ارتفاع، بدون قاب (border) و محتوا است. با این حال عرض و ارتفاعِ دلخواه می تواند توسط پراپرتیِ width و height در CSS تعریف بشه، همچنین می توان با استفاه از پراپرتی border در CSS، برای آن قاب (border) هم اعمال کرد.

درک مختصات های Canvas

canvas یک مساحت مستطیل شکل دو بعدیه. مختصات گوشه بالا-سمتِ چپِ canvas، (0 ، 0) است که بعنوان مبدأ شناخته میشه و مختصات گوشه پایین-سمت راست، (عرض canvas ، ارتفاع canvas) است که در زیر نشان داده شده:

canvas coordinate plane

کشیدن خط و شکل در canvas

در این بخش نگاهی به چگونگیِ کشیدن خط ها و شکل های پایه، با استفاده از عناصرِ canvas جدید معرفی شده در HTML5 و جاوا اسکریپت میندازیم. در ادامه الگوی پایه را برای کشیدن خط ها و شکل ها در HTML5 Canvas دو بعدی مینین:

مثال

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas</title>
<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        // draw stuff here
    };
</script>
</head>
<body>
    <canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

همه ی این خط ها بجز 7 تا 11، کاملاً ساده ان. تابع window.onload امکان دسترسی به عنصرِ canvasای را می ده که زمانِ منتظر ماندن برای بارگذاریِ صفحه نیازش داریم. هنگامی که صفحه بارگذاری می شه، میتوانیم با document.getElementById() به عنصر canvas دسترسی پیدا کنیم. بعد از آن با پاس دادن 2d به متدِ getContext() از شیء canvas یک canvas متنیِ دو بعدی تعریف کردیم.

کشیدن خط

پایه ای ترین خطی که می توانید در canvas بکشین، خط راستِه. متدهایی که برای این کار به کار میرن عبارتند از: moveTo(), lineTo() وstroke().

متد moveTo() مکانِ، مکان نمایِ مربوط به کشیدن، در داخل canvas را تعریف می کنه در حالی که متدِ lineTo() برای تعریف مختصاتِ نقطه ی انتهایی خط ها به کار میره، و در آخر، متدِ stroke() برای قابلِ دیدن کردن خط به کار میره.

مثال

<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.moveTo(50, 150);
        context.lineTo(250, 50);
        context.stroke();
    };
</script>

کشیدن منحنی

میتوانید با استفاده از متد arc()، خط منحنی، مثل لبخند، بکشین. شکل دستوریِ پایه متد arc() بصورت زیرِه:

context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);

مثال زیر یک خط منحنی ساده روی canvas می کشه:

مثال

<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
        context.stroke();
    };
</script>

کشیدن مستطیل

می توانید با متد rect()، مستطیل و مربعی ساده ایجاد کنین. متد rect() به چهار پارامتر نیاز داره: x و y برای مکان مستطیل و width و height برای عرض و ارتفاع مستطیل. شکل دستوریِ پایه متدِ rect() بصورت زیره:

context.rect(x, y, width, height);

مثال زیر یک مستطیل ساده در وسطِ canvas ایجاد می کنه:

مثال

<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.rect(50, 50, 200, 100); 
        context.stroke();
    };
</script>

کشیدن دایره

هیچ متد مشخصی مثل rect()، برای کشیدن دایره وجود نداره. با این حال میتوانید یک منحنیِ بسته مثل دایره با متدِ arc() ایجاد کنین. شکل دستوریِ پایه برای کشیدن یک دایره کامل بصورت زیره:

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

مثال زیر یک مستطیل کامل، وسطِ canvas می کشه:

<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 100, 70, 0, 2 * Math.PI, false);
        context.stroke();
    };
</script>

اعمال استایل ها و رنگ ها روی Storke

رنگ پیش فرضِ storke مشکیه و ضخامتش یک پیکسله ولی میتوانید رنگ و عرض آن را به ترتیب با استفاده از پراپرتی های strokeStyle و lineWidth تعریف کنین.

مثال

<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.lineWidth = 5;
        context.strokeStyle = "orange";
        context.moveTo(50, 150);
        context.lineTo(250, 50);
        context.stroke();
    };
</script>

همچنین می توانید برای خط ها، با استفاده از پراپرتیِ linecap، استایل cap تعریف کنین. سه استایل برای خط هایی که استایلِ cap دارن وجود داره: butt، round و square.

مثال

<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.lineWidth = 10;
        context.strokeStyle = "orange";
        context.lineCap = "round";
        context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
        context.stroke();
    };
</script>

رنگ کردنِ داخلِ شکل های canvas

می توانید داخلِ شکل های canvas را با استفاده از متد fillStyle() رنگ کنین. مثال زیر روشِ رنگ کردن داخلِ یک مستطیل را با یک رنگ ساده، نشان می ده:

مثال

<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.rect(50, 50, 200, 100); 
        context.fillStyle = "#FB8B89";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
    };
</script>

نکته: برای تفسیر (render) صحیحِ storke توصیه می شه که از متد fill()، قبل از متد storke() استفاده بشه.

به طور مشابه، می توانید با استفاده از متد fillStyle() داخل یک دایره را رنگ کنین.

مثال

<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 100, 70, 0, 2 * Math.PI, false);
        context.fillStyle = "#FB8B89";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
    };
</script>

رنگ کردنِ شکل های canvas با رنگ های گرادیانت (Gradient)

می توانید شکل های داخل canvas را بجای پر کردن با رنگ های ساده با رنگ های گرادیانت (Gradient) پر کنین. دو استایلِ گرادیانت در HTML5 وجود داره- خطی (linear) و شعاعی (radial).

شکل دستوریِ پایه گرادیانت خطی (linea gradient) بصورت زیره:

var grd = context.createLinearGradient(startX, startY, endX, endY);

مثال زیر روش پر کردنِ یک مستطیل، با استفاده از گرادیانتِ خطی (linear gradient)، با کمک متدِ createLinearGradient() را نشان میده.

مثال

var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);

بطور مشابه، می توانید شکل های canvas را با گرادیانتِ شعاعی (radial gradient) با استفاده از متدِ createRadialGradient() پر کنین. شکل پایه گرادیانتِ شعاعی بصورت زیره:

<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 100, 70, 0, 2 * Math.PI, false);
        var grd = context.createRadialGradient(150, 100, 10, 160, 110, 100);
        grd.addColorStop(0, '#8ED6FF');   
        grd.addColorStop(1, '#004CB3');
        context.fillStyle = grd;
        context.fill();
        context.stroke();
    };
</script>

نوشتن متن در canvas

می توانید به canvas، متن هم اضافه کنین. این متن می تواند هر نوعی از کارکتر های رمزگذاری شده باشد (Unicode characters). مثال زیر یک پیام ساده “Hrllo World!” داخل canvas اضافه می کنه:

مثال

<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 32px Arial";
        context.fillText("Hello World!", 50, 100);
    };
</script>

می توانید در canvas رنگ متن و چینش آن را هم تنظیم کنین.

مثال

<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 32px Arial";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillStyle = "orange";
        context.fillText("Hello World!", 150, 100);
    };
</script>

می توانید با استفاده از متد strokeText()، روی متن، استایل storke هم اعمال کنین. این متد بجای داخل متن اطراف آن را رنگ می کنه. با این حال اگه می خواید هم داخل و هم بیرون متنِ داخلِ canvas را رنگ کنین می توانید از هر دو متد fillText() و strokeText() با هم استفاده کنین.

مثال

<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 32px Arial";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.strokeStyle = "orange";
        context.strokeText("Hello World!", 150, 100);
    };
</script>

نکته: برای تفسیر (render) صحیح storke، توصیه میشه از متدِ fillText() قبل از متد strokeText() استفاد کنین.

مبحث آموزشی

آموزش HTML 5

Learn HTML 5

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

آخرین مقالات

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد