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

در ادامه آموزش Canvas به بررسی متدهای دیگر رسم اشکال هندسی می پردازیم.

متد rect()

این متد چهار ورودی دریافت می کند و یک مستطیل رسم می کند.

ورودی اول: مختصات x برای رسم مستطیل
ورودی دوم: مختصات y برای رسم مستطیل
ورودی سوم : طول مستطیل
ورودی چهارم: عرض مستطیل

رسم مستطیل

<!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(300,300,200,100);

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

خروجی

تابع رسم دایره

arc(x,y,RADIUS,START ANGLE,END ANGLE,ANIT CLOCKWISE(TRUE/FALSE))

متد arc برای ما یک دایره رسم می کند.

x و y مرکز دایره را مشخص می کند. )یعنی شروع رسم دایره را مشخص می کند(

RADIUS شعاع دایره را مشخص می کند.

START ANGLE و END ANGLE شروع و پایان زاویه را مشخص می کند.

ANIT CLOCKWISE(TRUE/FALSE) دو حالت True و False دارد. True به معنی پاد ساعتگرد و False به معنی ساعتگرد. و حالت پیشفرض آن نیز False می باشد.

رسم دایره کامل

<!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.arc(XDomainRequest,y,RADIUS,START ANGLE,END ANGLE,ANIT CLOCKWISE(TRUE/FALSE));
        c.arc(200, 200, 50, 0, Math.PI * 2);

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

خروجی

رسم دایره کامل در Canvas

نکته:

Math.PI از توابع ریاضی می باشد یعنی 3.14

رسم سه چهارم دایره

<!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.arc(200, 200, 50, 0, Math.PI * 1.5);

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

خروجی

رسم سه چهارم دایره در Canvas

رسم یک چهار دایره به صورت پادساعتگرد

<!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.arc(200, 200, 50, 0, Math.PI * 1.5, true); 

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

خروجی

رسم یک چهار دایره به صورت پادساعتگرد در Canvas

رسم یک دوم دایره

<!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.arc(100, 100, 50, 0, Math.PI);

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

خروجی

رسم یک دوم دایره در Canvas

رسم یک دوم دایره به صورت پادساعتگرد

<!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.arc(100, 100, 50, 0, Math.PI, true);

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

خروجی

رسم یک دوم دایره به صورت پادساعتگرد در Canvas

رسم یک چهار دایره

<!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.arc(50, 50, 50, 0, Math.PI / 2);

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

خروجی

رسم یک چهار دایره در Canvas

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