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

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


کار با پراپرتی ها در Canvas

در ادامه آموزش های Canvas به مفهوم پراپرتی ها خواهیم پرداخت.

 

انوع پراپرتی ها در Canvas

پراپرتی  lineWidth

یک مقدار دریافت می کند و ضخامت خط را مشخص می کند.

 

پراپرتی lineCap

این پراپرتی سه مقدار دریافت می کند

Butt مقدار پیش فرض

round گوشه های خط ها را گرد می کند و طول خط هم کمی افزایش پیدا می کند.

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

 

پراپرتی lineJoin

این پراپرتی سه مقدار را دریافت می کند.

miter حال پیش فرض

round الصاق یا اتصال دو خط را گرد می کند

bevel الصاق یا اتصال دو خط را اریب می کند.

 

مثال

<!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.beginPath();

        c.moveTo(100, 100);

        c.lineTo(200, 200);
        c.lineTo(300, 100);

        c.lineWidth = 5;

        c.lineCap = "butt";
        c.lineCap = "round";
        c.lineCap = "squer";

        c.lineJoin = "miter";
        c.lineJoin = "round";
        c.lineJoin = "bevel";

        c.fill();

        c.closePath();
        c.stroke();
    </script>
</body>
</html>

خروجی

رسم مثلث

مت fill()

این متد داخل شکل را با رنگ سیاه پر می کند.

 

پراپرتی strokeStyle

با استفاده از این پراپرتی می توانیم رنگ خط ها را مشخص کنیم. و به روش های که که در CSS رنک به تگ ها اعمال می کنیم در اینجا هم می توانیم استفاده کنیم.

 

پراپرتی fillStyle

با این پراپرتی می توانیم رنگ داخل شکل را که توسط متد fill() پر می کنیم مشخص کنیم.

 

مثال

<!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.beginPath();

        c.rect(100, 100, 200, 100);
        c.lineWidth = 5;
        //c.strokeStyle = "red";
        //c.strokeStyle = "#102030";
        //c.strokeStyle = "rgb(10,60,200";

        c.strokeStyle = "rgba(10,60,200,0.3";

        //c.strokeStyle = "hsl(70,60%,10%)";
        //c.strokeStyle = "hsla(70,60%,10%,0.5)";

        c.fillStyle = "blue";
        c.fill();

        c.stroke();
    </script>
</body>
</html>

خروجی

رسم مستطیل

دانلود

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

نظر / سوال

Captcha

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