عنصر <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 notsupport the HTML5 canvas tag.
</canvas>
</body>
</html>
|
مشاهده ی خروجی در JSBin
روش کلی کار در جاوا اسکریپت به این صورت است:
قدم اول: ابتدا یک canvas را پیدا کنید
|
|
varcanvas=document.getElementById("myCanvas");
|
قدم دوم: ایجاد شیء کشیدن
()getContext یکی از اشیاء پیش فرض و داخلی HTML است که خصوصیات و متد های مختلفی برای کشیدن اشکال مختلف دارد
|
|
varctx=canvas.getContext("2d");
|
قدم سوم: روی canvas طرحی را بکشید
ابتدا رنگ درون شکل خود را مشخص می کنیم
سپس برای مثال از متد fillRect استفاده می کنیم که یک مستطیل را می کشد. پارامتر اول محور x، پارامتر دوم محور y، پارامتر سوم عرض و پارامتر چهارم ارتفاع این مستطیل خواهند بود
|
|
ctx.fillRect(0,0,150,75);
|
مثال نهایی ما به این شکل خواهد بود:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"width="200"height="100"
style="border:1px solid #c3c3c3;">
Your browser does notsupport the canvas element.
</canvas>
<script>
varcanvas=document.getElementById("myCanvas");
varctx=canvas.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
|
مشاهده ی خروجی در JSBin
حالا که با کلیت آن آشنا شدیم بیایید چند نمونه اشکال مختلف را در آن بکشیم!
کشیدن یک خط صاف
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"width="200"height="100"style="border:1px solid #d3d3d3;">
Your browser does notsupport the HTML5 canvas tag.</canvas>
<script>
varc=document.getElementById("myCanvas");
varctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
|
مشاهده ی خروجی در JSBin
- تابع moveTo نقطه ی شروع خط را مشخص می کند.
- تابع lineTo نقطه ی پایان خط را مشخص می کند.
- پس از مشخص کردن نقاط باید خط را به وسیله ی متد های مورد نظر بکشید (مثلا
()stroke و …)
کشیدن یک دایره
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"width="200"height="100"style="border:1px solid #d3d3d3;">
Your browser does notsupport the HTML5 canvas tag.</canvas>
<script>
varc=document.getElementById("myCanvas");
varctx=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 یا شعاع دایره می باشد.
کشیدن یک نوشته
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"width="200"height="100"style="border:1px solid #d3d3d3;">
Your browser does notsupport the HTML5 canvas tag.</canvas>
<script>
varc=document.getElementById("myCanvas");
varctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
</script>
</body>
</html>
|
مشاهده ی خروجی در JSBin
شاید کمی گیج شده باشید. آیا می دانید تفاوت بین یک نوشته و کشیدن یک نوشته چیست؟ اگر یک نوشته را در صفحه ی خود قرار دهید (تایپ کنید) کاربر می تواند آن را کپی کند و با آن به عنوان یک متن رفتار کند اما اگر نوشته را به جاوا اسکریپت بدهید، دیگر آن نوشته از کاراکترها تشکیل نشده است بلکه از پیکسل تشکیل شده و یک نقاشی از کلمات شماست.
سوال: این قابلیت چه فایده ای دارد؟
پاسخ: از این مفهوم چه با canvas طراحی شود و چه با غیر آن، می توان در زمینه های مختلفی استفاده کرد که معروف ترین آن ها کد captcha است. در کدهای امنیتی captcha متن کج و موج نوشته می شود تا خواندنش سخت شود (که با تایپ عادی امکان پذیر نیست) و همچنین کاربر نباید قابلیت کپی کردن آن را داشته باشد (و گرنه ربات ها هم آن را کپی می کنند).
دادن stroke (دورچین) به متن
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"width="200"height="100"style="border:1px solid #d3d3d3;">
Your browser does notsupport the HTML5 canvas tag.</canvas>
<script>
varc=document.getElementById("myCanvas");
varctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
</script>
</body>
</html>
|
مشاهده ی خروجی در JSBin
کشیدن یک gradient خطی
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"width="200"height="100"style="border:1px solid #d3d3d3;">
Your browser does notsupport the HTML5 canvas tag.</canvas>
<script>
varc=document.getElementById("myCanvas");
varctx=c.getContext("2d");
// Create gradient
vargrd=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 دایره ای
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"width="200"height="100"style="border:1px solid #d3d3d3;">
Your browser does notsupport the HTML5 canvas tag.</canvas>
<script>
varc=document.getElementById("myCanvas");
varctx=c.getContext("2d");
// Create gradient
vargrd=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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<body>
<p>Image touse:</p>
<img id="scream"src="https://www.w3schools.com/html/img_the_scream.jpg"alt="The Scream"width="220"height="277">
<p>Canvas tofill:</p>
<canvas id="myCanvas"width="250"height="300"
style="border:1px solid #d3d3d3;">
Your browser does notsupport the HTML5 canvas tag.</canvas>
<p><button onclick="myCanvas()">Tryit</button></p>
<script>
functionmyCanvas(){
varc=document.getElementById("myCanvas");
varctx=c.getContext("2d");
varimg=document.getElementById("scream");
ctx.drawImage(img,10,10);
}
</script>
</body>
</html>
|
مشاهده ی خروجی در JSBin
- font نوع فونت و خصوصیاتش را تعیین می کند.
- fillText متن را تو پر می نویسد.
- strokeText متن را به صورت تو خالی و دورچین مینویسد.
به مثالی دیگر نیز دقت کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"width="300"height="200"
style="border:1px solid #d3d3d3;">
Your browser does notsupport the canvas element.
</canvas>
<script>
varcanvas=document.getElementById("myCanvas");
varctx=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
امیدوارم از این قسمت لذت برده باشید.
چطور از فشرده ساز Winrar استفاده کنیم؟