آموزش 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>

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

Your browser does not support the canvas element.

</canvas>

<script type="text/javascript">

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>

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

Your browser does not support the canvas element.

</canvas>

<script type="text/javascript">

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>

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

Your browser does not support the canvas element.

</canvas>

<script type="text/javascript">

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>

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

Your browser does not support the canvas element.

</canvas>

<script type="text/javascript">

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>

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

Your browser does not support the canvas element.

</canvas>

<script>

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 را آغاز خواهیم کرد .

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

 

 

 

تصویر مصطفی حاجتمند
مصطفی حاجتمند
چهارشنبه, 06/04/2014 - 15:14

تگ های Html5تست کردم به ترتیب از چپ به راست ....جالب بودن خدا قوت :)...


مرکز دروپال ايران

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

آدرس : دفتر شهریار : شهرک وائین ، بعثت 5 نبش سپیدار 10 پلاک 26

تلفن : 09370977406 - 09384363798

ایمیل : drupalcenter.ir@gmail.com

ارتباط با مدیر سایت از طریق تلگرام

logo-samandehi

مرکز دروپال ایران بزرگترین وب سایت  آموزش دروپال در کشور ، در مهر ماه سال 1388 به طور رسمی فعالیت خود را در زمینه وب و دنیای دیجیتال آغاز کرده است. مجموعه مرکز دروپال ایران شامل « آموزش های تصویری » ، « معرفی جدیدترین ماژول ها » ، « ترجمه مقالات دروپالی روز دنیا » ، « طراحی قالب دروپال» و « خبرهای دنیای دروپال» می باشد.این مجموعه به همراه گروه فنی خود و به  پشتوانه کاربران فعال و متعهد ، با  در نظر داشتن چشم اندازی برای آینده نزدیک ، قصد دارد تا به معرفی و آموزش  هرچه بیشتر و بهتر هسته قدرتمند و دوست داشتنی دروپال ،  به روش های مختلف در زمینه های گوناگون بپردازد تا در کنار کاربران خود به موفقیت های هرروز خود بیفزاید. در همین راستا قصد داریم تا بصورت تخصصی و حرفه ای مباحث مختلف دروپال را با کوچک ترین جزئیات و تکنیک ها به دروپال کاران و کسانی که قصد دارند طراحی وب سایت ،پورتال و سیستم های هوشمند را آغاز کنند ، آموزش دهیم.گستردگی مطالب ، تنوع در آموزش ها ، نگاه تخصصی و همگام بودن با کاربران در آموزش عوامل متمایز کردن مرکز دروپال ایران با سایر آموزش دهندگان می باشد.
دروپال برای انجام طراحی های شگفت انگیز !  Drupal Builds something amazing