آموزش Canvas در HTML(بوم نقاشی)

از عنصر <canvas> در HTML برای ترسیم گرافیک در یک صفحه وب استفاده می شود. گرافیک بالا، توسط عنصر <canvas> ایجاد شده است. تصویر مذکور، چهار عنصر را نشان می دهد:

یک مستطیل قرمز
یک مستطیل شیب رنگ(gradient)
یک مستطیل چند رنگ(multicolor)
یک متنِ چند رنگ(multicolor text)

Canvas در HTML چیست؟

از عنصر <canvas> در HTML برای ترسیم گرافیک ها به وسیله ی جاوا اسکریپت استفاده می شود. عنصر <canvas>، تنها یک ظرف(container) برای گرافیک ها می باشد. برای اینکه بتوانیم گرافیک ها را در canvas رسم کنیم، باید از جاوا اسکریپت استفاده کنیم. canvas متدهای زیادی برای ترسیم مسیرها، جعبه ها، دایره ها، متن و اضافه کردن تصاویر دارد. canvas توسط تمام مرورگرهای اصلی پشتیبانی می شود.

مثال هایی از Canvas در HTML

Canvas یک ناحیه ی مستطیلی در صفحه ی HTML است. به طور پیش فرض، یک Canvas کادر(border) و محتوا ندارد. کد استفاده از Canvas به صورت زیر است:

<canvas id="myCanvas" width="200" height="100"></canvas>

نکته: برای تعریف سایز Canvas، همواره سعی کنید خصوصیت id (برای ارجاع شدن در یک اسکریپت) و خصوصیت های width و height را مشخص کنید. برای اضافه کردن یک کادر(border) از خصوصیت style استفاده کنید. در زیر، یک مثال از یک canvas خالی را مشاهده می کنید:

مثال شماره 1

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

امتحان کنید

اضافه کردن کدهای جاوا اسکریپت به Canvas

پس از اینکه یک ناحیه ی canvas مستطیلی ایجاد کردیم، برای اینکه بتوانیم چیزی را ترسیم کنیم، باید مقداری کد جاوا اسکریپت اضافه کنیم. به مثال های زیر توجه کنید:

ترسیم یک خط:

مثال شماره 2

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>

امتحان کنید

ترسیم یک دایره:

مثال شماره 3

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>

امتحان کنید

ایجاد یک متن:

مثال شماره 4

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>

امتحان کنید

متن توخالی(Stroke Text)

مثال شماره 5

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>

امتحان کنید

ترسیم شیب رنگ خطی(Linear Gradient)

مثال شماره 6

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>

امتحان کنید

شیب رنگ دایره ای(Circular Gradient)

مثال شماره 7

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// ایجاد شیب رنگ
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// پر کردن با شیب رنگ
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>

امتحان کنید

مثال شماره 8

ترسیم تصویر با drawImage:

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>

امتحان کنید

برای نظردهی، در سایت عضو شوید یا به آن وارد شوید!

JComments