آموزش html5 وcss از صفرتا 100 - بخش سوم | دروپال فارسی؛ آموزش و قالب

در آموزش تگ های html5 وcss3 از0 تا100 در بخش اول و بخش دوم با تگ های جدید html5 و قابلیت های آن آشنا شدیم . در بخش سوم از این سری آموزش به معرفی تگ canvas میپردازیم . از تگ canvas در Html5 برای طراحی اشیا و اشکال گرافیکی به صورت Run Time به کمک زبان های اسکریپتی مثل جاوااسکریپت استفاده میشود . به وسیله تگ <canvas> میتوانید اشیا گرافیکی مثل مربع،دایره،تصاویرو ... را روی صفحه ایجاد نمایید . این تگ در واقع یک ناحیه مستطیل شکل است که می توانیم روی تمام پیکسل های آن کنترل داشته باشیم وآن را با نام بوم نقاشی در html5 نیز می شناسند .

خاصیت ها

fillStyle برای پر نمودن فضای یک شکل به کار می رود.

strokeStyle برای ایجاد یک مرز یا border به کار می رود .

shadowColor برای ایجاد رنگ سایه به کار می رود .

shadowBlur برای تعیین نوع blur سایه به کار می رود .

shadowOffsetX برای مشخص نمودن مقدار سایه در حالت افقی از شکل به کار می رود .

shadowOffsetY برای مشخص نمودن مقدار سایه در حالت عمودی از شکل به کار می رود .

lineCap برای ایجاد استایل در انتهای خط به کار میرود .

lineJoin برای ایجاد گوشه گرد هنگامی که دو خط بهم می رسند ، به کار می رود.

LineWidth عرض خط کنونی را مشخص میکند .

miterLimit حداکثر طول میان زاویه داخلی و خارجی را مشخص می کند .

Font برای ایجاد فونت در متن به کار برده می شود .

textAlign برای مرتب سازی نوشته به کار گرفته می شود.

textBaselie متن را بالا یا پایین خط قرار می دهد .

متدها

()CreateLinearGradient : برای ایجاد Gradient خطی از رنگ ، عکس در شکل به کار برده میشود .

()Createpattern : برای ایجاد الگو در شکل به کار برده می شود.

()CreateRadialGradient : برای ایجاد gradient دور از رنگ ، عکس در شکل به کار برده می شود .

()addColorStop : برای مشخص نمودن رنگ و نقطه پایانی Gradient به کار برده می شود .

()rect : برای ایجاد چهارضلعی از متد rect استفاده می شود.

()Fill : برای پر کردن شکل استفاده می شود .

()Stroke : برای مشخص نمودن مرز یا border استفاده می شود.

()Beginpath : برای مشخص کردن شروع مسیر جدید استفاده می شود.

()movePath : برای رفتن به یک نقطه مشخص در صفحه بدون ایجاد خط در صفحه به کار می رود.

()Arc : برای ایجاد کمان به کار برده می شود.

()arcTo : برای ایجاد کمان میان دو خط استفاده می شود.

()Scale : برای بزرگ و کوچک نمودن شی ترسیمی به کار برده می شود.

()Rotate : برای چرخش تصویر به کار برده می شود.

()Translate : نگاشت نقطه (0,0) روی صفحه می باشد.

()Transform : جایگزین ماتریس جا به جایی در طراحی صفحه استفاده می شود .

()fillText : برای پر کردن متن با رنگ به کار برده می شود .

()stroketext : برای ایجاد مرز دور متن به کار برده می شود .

()measureText : ضخامت متن استفاده شده را بر می گرداند .

با مثال های متنوع زیر با تگ canvas بیشتر آشنا می شوید ، هریک از نمونه کد های زیررا در یک نرم افزار ویرایش متن کپی نموده و خروجی را در مرورگر مشاهده کنید :)

مثال : رسم یک خط با مشخص کردن اینکه از کجا شروع شود و کجا خاتمه یابد.

<html>

<body>

Your browser does not support the canvas element.

</canvas>

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

var cxt=c.getContext("2d");

cxt.moveTo(10,10);

cxt.lineTo(150,50);

cxt.lineTo(10,50);

cxt.stroke();

</script>

</body>

</html>

مثال : رسم یک دایره با مشخص کردن اندازه، رنگ و موقعیت مکانی

<html>

<body>

Your browser does not support the canvas element.

</canvas>

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

var cxt=c.getContext("2d");

cxt.fillStyle="#0e17cf";

cxt.beginPath();

cxt.arc(70,18,15,0,Math.PI*2,true);

cxt.closePath();

cxt.fill();

</script>

</body>

</html>

مثال : نوشتن یک متن توپُر با فونت Arial

<html>

<body>

Your browser does not support the canvas element.

</canvas>

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

</script>

</body>

</html>

مثال : نوشتن یک متن تو خالی با فونت Arial

<html>

<body>

Your browser does not support the canvas element.

</canvas>

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

</script>

</body>

</html>

مثال : ایجاد یک گرادیانت خطی با استفاده از تگ canvas

<html>

<body>

Your browser does not support the canvas element.

</canvas>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"blue");
grd.addColorStop(1,"white");
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);

</script>

</body>

</html>

در بسیاری از صفحات وب فایل های ویدئویی و فلش پخش می شود تا قبل از ارائه html5 استاندارد خاصی برای نمایش فایل های ویدئویی در صفحات وب وجود نداشت . در آموزش بعدی به معرفی تگ های audio – video در html5 می پردازیم و با بررسی قابلیت های پیشرفته در html5 آموزش آن را به پایان رسانده وآموزش css3 را آغاز خواهیم کرد .

با ما همراه باشید ...

nazanin-k

راه آسان‌تری برای ارتباط با کاربران‌مان پیدا کرده‌ایم :) کانال تلگرام مرکز دروپال ایران

طراحی سایت

آموزش طراحی سایت

با عضويت در خبرنامه از جديدترين محصولات و تخفيف هاي ما با خبر شويد

فرم جستجو

آموزش html5 وcss از صفرتا 100 - بخش سوم

راه های ارتباط با ما