آموزش کار با Canvas در HTML5 قسمت نهم
0 0

آموزش کار با Canvas در HTML5 قسمت نهم


آموزش کار با Canvas در HTML5 قسمت نهم

در آخرین قسمت از آموزش کار با Canvas به معرفی چند پراپرتی و متدهای کار با متن می پردازیم.

 

پراپرتی font

با این پراپرتی می توان یک فوت به متن اختصاص داد و ورودی های آن به صورت زیر می باشد

 (font-style , font-weight , font-size , font-family)

 

پراپرتی textAlign

با این پراپرتی می توان ترازبندی متن را مشخص کرد.

 

متد fillText()

این متد یک متن را نمایش می دهد و چهار ورودی دارد.

ورودی اول: متن مورد نظر

ورودی دوم: مختصات x

ورودی سوم: مختصات y

ورودی چهارم: عرض متن را مشخص می کند

 

متد strokeText()

کار این متد همانند متد fillText() است با این تفاوت که نوشته را به صورت توپر نمایش نمی دهد.

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        canvas {
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div>
        <canvas width="600" height="600" id="canvas"></canvas>
    </div>
    <script type="text/javascript" language="javascript">
        var canvas = document.getElementById('canvas');
        var c = canvas.getContext('2d');

        c.fillStyle = "blue";
        c.strokeSty = "red";
        c.lineWidth = 2;

        c.font = "normal normal 80px 'Arial'";
        c.textAlign = "center";

        c.fillText("iranganj", 150, 500);
        c.strokeText("iranganj", 150, 500);
        c.strokeText("iranganj", 150, 400);
    </script>
</body>
</html>

خروجی

کار با متون در canvas

دانلود

نویسنده حسین فتحی
گروه مطلب Canvas
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۱۵ مهر ۱۳۹۵
منبع ایران گنج
تعداد نظرات ۰
قیمت کاربران مهمان
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

نظر / سوال

Captcha

این صفحه را می‌پسندم