آموزش کن وس 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>‎  

تصویری را که می بینید از 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 بود. هنوز ویژگی های جالب دیگری در مورد این بوم نقاشی وجود دارد که باید در مورد آنها بیشتر بدانید.