معرفی عنصر Canvas در HTML

<canvas> چیست؟

عنصر <canvas> برای ایجاد اشکال و عناصر گرافیکی در صفحات وب توسط جاوا اسکریپت مورد استفاده قرار می گیرد. در واقع این عنصر تنها نگه دارنده ی مواد گرافیکی است و خودش کاری نمی کند بلکه برای ساخت یک شکل گرافیکی باید از جاوا اسکریپت استفاده کنید. پشتیبانی از این عنصر در مرورگر های مختلف به شرح زیر است:

مرورگر کروم: از نسخه ی 4 به بعد
مرورگر edge/IE: از نسخه ی 9 به بعد
مرورگر فایرفاکس: از نسخه ی 2 به بعد
مرورگر سافاری: از نسخه ی 3.1 به بعد
مرورگر اپرا: از نسخه ی 9 به بعد

<canvas> هیچ border یا محتوایی ندارد و یک مستطیل خالی در صفحه ی HTML است. نحوه ی ایجاد آن به شکل زیر است:

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

باید برای width و height آن اعداد مشخصی تعریف کنید تا اندازه ی درستی به دست بیاورید.

نکته: همیشه از یک id برای این عنصر استفاده کنید تا در اسکریپت تان استفاده شود.

به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>

</body>
</html>

مشاهده ی خروجی در JSBin

روش کلی کار در جاوا اسکریپت به این صورت است:

قدم اول: ابتدا یک canvas را پیدا کنید

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

قدم دوم: ایجاد شیء کشیدن

()getContext یکی از اشیاء پیش فرض و داخلی HTML است که خصوصیات و متد های مختلفی برای کشیدن اشکال مختلف دارد

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

قدم سوم: روی canvas طرحی را بکشید

ابتدا رنگ درون شکل خود را مشخص می کنیم

ctx.fillStyle = "#FF0000";

سپس برای مثال از متد fillRect استفاده می کنیم که یک مستطیل را می کشد. پارامتر اول محور x، پارامتر دوم محور y، پارامتر سوم عرض و پارامتر چهارم ارتفاع این مستطیل خواهند بود

ctx.fillRect(0, 0, 150, 75);

مثال نهایی ما به این شکل خواهد بود:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

حالا که با کلیت آن آشنا شدیم بیایید چند نمونه اشکال مختلف را در آن بکشیم!

کشیدن یک خط صاف

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

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

</body>
</html>

مشاهده ی خروجی در JSBin

تابع moveTo نقطه ی شروع خط را مشخص می کند.
تابع lineTo نقطه ی پایان خط را مشخص می کند.
پس از مشخص کردن نقاط باید خط را به وسیله ی متد های مورد نظر بکشید (مثلا ()stroke و ...)

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

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

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

</body>
</html>

مشاهده ی خروجی در JSBin

beginPath یک path گرافیکی را مشخص می کند.
(arc(x,y,r,startangle,endangle یک منحنی می سازد. برای تبدیل این منحنی به دایره باید startangle (زاویه ی ابتدایی برای شروع) را روی 0 و endangle (زاویه ی نهایی) را روی Math.PI*2 بگذارید (PI همان عدد پی یعنی 3.14 است). مقادیر x و y نیز مختصات مرکز دایره را مشخص می کنند. r نیز همان radius یا شعاع دایره می باشد.

کشیدن یک نوشته

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

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

</body>
</html>

مشاهده ی خروجی در JSBin

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

سوال: این قابلیت چه فایده ای دارد؟

پاسخ: از این مفهوم چه با canvas طراحی شود و چه با غیر آن، می توان در زمینه های مختلفی استفاده کرد که معروف ترین آن ها کد captcha است. در کدهای امنیتی captcha متن کج و موج نوشته می شود تا خواندنش سخت شود (که با تایپ عادی امکان پذیر نیست) و همچنین کاربر نباید قابلیت کپی کردن آن را داشته باشد (و گرنه ربات ها هم آن را کپی می کنند).

دادن stroke (دورچین) به متن

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

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

</body>
</html>

مشاهده ی خروجی در JSBin

کشیدن یک gradient خطی

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

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

</body>
</html>

مشاهده ی خروجی در JSBin

کشیدن یک gradient دایره ای

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

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

// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

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

</body>
</html>

مشاهده ی خروجی در JSBin

قرار دادن تصاویر در canvas

<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="scream" src="https://www.w3schools.com/html/img_the_scream.jpg" alt="The Scream" width="220" height="277">

<p>Canvas to fill:</p>
<canvas id="myCanvas" width="250" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<p><button onclick="myCanvas()">Try it</button></p>

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

</body>
</html>

مشاهده ی خروجی در JSBin

font نوع فونت و خصوصیاتش را تعیین می کند.
fillText متن را تو پر می نویسد.
strokeText متن را به صورت تو خالی و دورچین مینویسد.

به مثالی دیگر نیز دقت کنید:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="200"
style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.font="30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

امیدوارم از این قسمت لذت برده باشید.