آموزش HTML – تگ Canvas در html

در جلسه قبلی آموزش HTML با input های جدید فرم ها در HTML5 آشنا شدیم. در این بخش به تگ Canvas در html خواهیم پرداخت.

تگ Canvas برای طراحی عناصر گرافیکی در صفحه وب استفاده می شود

Canvas چیست

تگ Canvas در html می تواند برای طراحی گرافیکی در صفحه وب با استفاده از اسکریپت نویسی (معمولا جاوااسکریپت) انجام شود.

تگ Canvas توسط اپل برای ویجت های داشبورد سیستم عامل مک معرفی شد و قدرت گرافیک ها را در مرورگر وب سافاری داشت. بعد ها در فایرفاکس, گوگل کروم و اپرا نیز استفاده شد.

حالا canvas جزیی از خصوصیات HTML5 برای نسل بعدی تکنلوژی های وب است. تگ <canvas> اخیرا توسط تمام مرورگر ها از جمله IE 9+, فایرفاکس, سافاری و اپرا پشتیبانی می شود.

بصورت پیش فرض تگ Canvas عرض ۳۰۰px و ارتفاع ۱۵۰px بدون border و محتوا را دارد به هر حال این ویژگی ها می توانند توسط CSS تغییر کنند.

درک مختصات Canvas

Canvas یک مستطیل دوبعدی است. مختصات گوشه بالا سمت چپ کانواس (۰, ۰) است که به عنوان مبدا شناخته می شود و پایین سمت راست نیز بصورت (canvas-width, canvas-height) مشخص می شود.

کشیدن راه و شکل ها در Canvas

در این بخش نگاهی می اندازیم به نحوه کشدین شکل های ساده توسط تگ Canvas در html و جاوااسکریپت.

قالب ما برای کشیدن راه و شکل ها در کانواس ۲بعدی HTML5 :

<!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>

<!DOCTYPE html>

<head>

<title>HTML5 Canvas</title>

window.onload = function(){

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

var context = canvas.getContext("2d");

// draw stuff here

};

</script>

</head>

<body>

</body>

</html>

همه خط های ۷ تا ۱۱ بسیار ساده هستند. تابع window.onload مشخص می کند که برای دسترسی به المان canvas باید تا لود شدن کامل صفحه صبر کنیم.

همین که صفحه لود شد, می توانید به المان canvas با document.getElementById() دسترسی داشته باشیم.

بعد ما یک کانواس دوبعدی با پاس دادن ۲d به متد آبجکت canvas که getContext() است, شی را ایجاد می کنیم.

کشیدن یا رسم یک خط

ساده ترین مسیری که می توانید با تگ canvas در html بسازید, خط مستقیم است. برای اینکار از متدهای moveTo() , lineTo() , stroke() استفاده می کنیم.

متد moveTo() برای مشخص کردن موقعیت نشانگر داخل کانواس استفاده می شود, متد 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>

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);

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

مثال :

<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>

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 موقعیت مستطیل و عرض و ارتفاع آن.

سینتکس متد rect() :

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

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

مثال :

<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>

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);

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

مثال :

<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>

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>

دادن استایل و رنگ به Stroke

رنگ پیش فرض stroke سیاه است و ضخامت آن یک پیکسل است اما می توانید این مقادیر را با 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>

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>

پر کردن رنگ داخل شکل های 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>

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>

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

مشابه آن, از 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>

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

تا اینجا کارهای جالبی با تگ canvas در html انجام دادیم. شما همچنین می توانید متن را داخل canvas بکشید.

این متن ها می توانند شامل هر کاراکتر یونیکدی باشند. مثال زیر یک مثال Hello World! را داخل یک کانواس قرار می دهد.

<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>

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>

همچنین می توانید رنگ متن و تراز بندی آن را ست کنید

<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>

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>

همچنین می توانید stroke را با متد strokeText() لحاظ کنید. این متد به جای پر کردن آن, رنگ متن را مشخص می کند. به هر حال اگر قصد دارید هر دو مقدار fill و stroke را ست کنید می توانید از 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>

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>

نکته: پیشنهاد می شود که از متد fillText() قبل از متد strokeText() به منظور رندر صحیح stroke استفاده کنید.

امیدوارم در این بخش آموزش HTML , از تگ Canvas در html نهایت استفاده را برده باشید.

در بخش بعدی با تگ SVG آشنا می شویم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

آموزش HTML – تگ Canvas در html

Canvas چیست

درک مختصات Canvas

کشیدن راه و شکل ها در Canvas

کشیدن یا رسم یک خط

رسم یک کمان (Arc)

ساخت یک مستطیل

ساخت یک دایره

دادن استایل و رنگ به Stroke

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

رسم متن در canvas

کتاب آموزش HTML به فارسی

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

آموزش HTML – موقعیت جغرافیایی html5

آموزش SSE در HTML5

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه

Canvas چیست

درک مختصات Canvas

کشیدن راه و شکل ها در Canvas

کشیدن یا رسم یک خط

<img loading="lazy" decoding="async" src="https://netparadis.com//wp-content/uploads/2019/01/canvas-lineto-netparadis.jpg" />

رسم یک کمان (Arc)

<img loading="lazy" decoding="async" src="https://netparadis.com//wp-content/uploads/2019/01/canvas-arc-netparadis.jpg" />

ساخت یک مستطیل

ساخت یک دایره

<img loading="lazy" decoding="async" src="https://netparadis.com//wp-content/uploads/2019/01/canvas-circle-netparadis.jpg" />

دادن استایل و رنگ به Stroke

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

<img loading="lazy" decoding="async" src="https://netparadis.com//wp-content/uploads/2019/01/canvas-rect-filling-netparadis.jpg" />

رسم متن در canvas

کتاب آموزش HTML به فارسی

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

آموزش HTML – موقعیت جغرافیایی html5

آموزش SSE در HTML5

لغو پاسخ