کاربر گرامی ، تمام فایلهای سایتپ رایگان میباشند اما جهت دانلود نیاز به عضویت دارید . عضویت  |  راهنما

آموزش اجرا و نمایش متن در بوم نقاشی html5

این مورد را ارزیابی کنید
(0 رای‌ها)
منتشرشده در آموزش html

پیشنهاد میکنیم قبل از شروع این آموزش مبحث قلبی را مطالعه فرمائید :  آموزش طراحی تصویر در بوم نقاشی html5

شروع آموزش :

کلمات جادویی برای چاپ متن در بوم نقاشی عبارتند از Fillstyle ،Strokestyle ،Font ،TextBaseline و در انتها filltext و stroketext.

 
<div>
<canvas id="c6" width="600" height="200" style="border:solid 1px #000000;"></canvas>
<div>
<button onclick="showFillText();return true;">Fill Text</button>
<button onclick="showStrokeText();return true;">Stroke Text</button>
<button onclick="Clear_text();return true;">Erase Everything</button>
</div>
</div>
<script>
var c6 = document.getElementById("c6");
var c6_context = c6.getContext("2d");
function showFillText() {
c6_context.fillStyle = '#f00';
c6_context.font = 'italic bold 30px sans-serif';
c6_context.textBaseline = 'bottom';
c6_context.fillText('HTML5 is cool!', 50, 100);
}
function showStrokeText() {
c6_context.strokeStyle = "#003300";
c6_context.font = '40px san-serif';
c6_context.textBaseline = 'bottom';
c6_context.strokeText('HTML5 is cool?', 300, 100);
}
function Clear_text() {
c6_context.clearRect(1, 1, 600, 300);
}
</script>
اجرا کدهای فوق بصورت زیر خواهد بود :

آموزش اجرا متن در بوم نقاشی Html5

تصویری را که می بینید از WHATWG اقتباس کرده ام که توضیح کامل برای انواع خطوط پایه ی کتن می باشد. آنچه را که باید مشاهده کنید این است که چگونه یک متن در ارتباط با آن خطوط پایه قرار می گیرد.

آموزش اجرا و نمایش متن در بوم نقاشی html5

در اینجا یک خط خاکستری در 100=y کشیده ام و قصد دارم هر لغت را در 100=y قرار دهم، اما با استفاده از textbaseline متفاوت. در مورد نگارش، فایرفاکس هیچگونه پشتیبانی روی خط پایه ی hanging ندارد.

c7_context.textBaseline = "top";
c7_context.fillText('Top', 5, 100);
c7_context.textBaseline = "bottom";
c7_context.fillText('Bottom', 80, 100);
c7_context.textBaseline = "middle";
c7_context.fillText('Middle', 200, 100);
c7_context.textBaseline = "alphabetic";
c7_context.fillText('Alphabetic', 300, 100);
c7_context.textBaseline = "hanging";
c7_context.fillText('Hanging', 400, 100);

اگر قصد دارید چیزی را در بوم نقاشی گسترش دهید و تمایل به پشتیبانی کاربرهایی داشتید که از IE8یا پایین تر استفاده می کنند، می توانید از یک جاوا اسکریپت با منبع آزاد به نام ExplorerCanvas استفاده کنید. اما در جریان باشید که وجود مسایل غیریکنواختی ممکن است باعث عصبانیت شما بشوند. باز هم این معرفی مختصری از بوم نقاشی HTML5 بود. هنوز ویژگی های جالب دیگری در مورد این بوم نقاشی وجود دارد که باید در مورد آنها بیشتر بدانید.

برای مطالعه بیشتر مباحث دیگر  این آموزش بر روی لینک روبرو کلیک نمائید : فهرست آموزش رایگان html5 سطح ساده تا پیشرفته

خواندن 34 دفعه
محسن محمد

با نگاهی گذرا به وب سایت های مشابه سایتپ , پی به تفاوت محصولات منتشر شده در سایتپ و این سایت ها خواهید برد .

ما در سایت ایران تمام سعیمان بر این است که محصولاتی را در اختیار شما عزیزان قرار دهیم که صحت کارکرد آنها بررسی شده و قابل استفاده باشند . در اکثر وب سایت های مشابه سایت ایران این دو مورد نادیده گرفته شده و کاربر پس از دانلود محصول مورد نظرش امکان استفاده از آنرا ندارد. به عبارت ساده تر وب سایت های مذکور فقط منتشر کننده هستند و از درستی آنها اطمینان حاصل نمیکنند .

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

www.mohssen.ir | این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید
محتوای بیشتر در این بخش: « آموزش طراحی تصویر در بوم نقاشی html5

مقالات آموزشی سایتپ

  • مشکل دو زبانه کردن جوملا 3 در تگ html با خصوصیت rtl به ltr
    مشکل دو زبانه کردن جوملا 3 در تگ html با خصوصیت rtl به ltr سلام به جوملا دوستان عزیز، در حال پیاده سازی یک وب سایت چند زبانه بودیم که با یک مشکل عجیب مواجه شدیم. ما زمانی که سیستم جوملا را چند زبانه کردیم ، برای ایجاد خصوصیت های LTR و RTL که بتوانیم به هر کدام از زبان ها یک STYLE مختلف…
    آموزش جوملا خواندن 105 بار
  • آموزش اجرا و نمایش متن در بوم نقاشی html5
    آموزش اجرا و نمایش متن در بوم نقاشی html5 پیشنهاد میکنیم قبل از شروع این آموزش مبحث قلبی را مطالعه فرمائید : آموزش طراحی تصویر در بوم نقاشی html5 شروع آموزش : کلمات جادویی برای چاپ متن در بوم نقاشی عبارتند از Fillstyle ،Strokestyle ،Font ،TextBaseline و در انتها filltext و stroketext. <div> <canvas id="c6" width="600" height="200" style="border:solid 1px…
    آموزش html خواندن 35 بار
  • رفع خطای Notice و Strict Standards و Deprecated در جوملا
    رفع خطای Notice و Strict Standards و Deprecated در جوملا در این مقاله آموزش جوملا با سه نوع خطای php از جمله Notice و Strict Standards و Deprecated که در جوملا ممکن است با آن روبرو شوید به صورت کامل آشنا خواهید شد و روش حل این موارد را می آموزید. روزانه تعداد زیادی از سوالات کاربران مربوط به خطاهای…
    آموزش جوملا خواندن 50 بار
  • گواهینامه امنیت SSL چیست و هر آنچه درباره پروتکل https باید بدانید
    گواهینامه امنیت SSL چیست و هر آنچه درباره پروتکل https باید بدانید مقاله پیش رو یک مقاله جامع و کاربردی است که نیاز شما را درباره امنیت خدمات دهنده و خدمات گیرنده , یا به عبارت ساده تر , امنیت اطلاعات ردو بدل شده بین کاربر و سرور وب سایت برطرف میکند . این مقاله از وب سایت های مختلف جمع آوری…
    آموزش هاست خواندن 125 بار
نمایش تمام مقالات سایتپ - کلیک نمائید

آموزش رایگان html5