آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش کن وس Text در HTML

دوره های مرتبط با این مقاله

بوم نقاشی: متن

چگونه متن را در بوم نقاشی اجرا کنیم؟
کلمات جادویی برای چاپ متن در بوم نقاشی عبارتند از 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>‎
Description
Context method
متن را با رنگ داخل آن چاپ می کند. رنگ متن توسط fillstyle مشخص می شود.
fillText(text,x,y)
متن را فقط با رنگ در اوت لاین متن چاپ می کند. رنگ متن توسط strokeStyle() تنظیم میشود.
strokeText(text,x,y)
رنگ CSS برای متن که strokeText را فرا می خواند.
strokeStyle
رنگ CSS برای متن که fillText را فرا می خواند.
fillStyle
فونت CSS مانند bold، 10px، san-serif
font
توضیح این مورد کمی گیج کننده است و برای آن به نمایشدیگری احتیاج خواهیم داشت. مقداربرای این ویژگی میتواند top، hanging، middle، alphabetic، ideographic، و bottom باشد. مقدار پیش فرض alphabetic می باشد.
textBaseline

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

بوم نقاشی: متن

در اینجا یک خط خاکستری در y=100 کشیده ام و قصد دارم هر لغت را در y=100 قرار دهم، اما با استفاده از 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 بود. هنوز ویژگی های جالب دیگری در مورد این بوم نقاشی وجود دارد که باید در مورد آنها بیشتر بدانید.

  • 3310
  •    1938
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .