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

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


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

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

 

متد strokeRect()

این متد یک مستطیل رسم می کند

 

متد fillRect()

متد فوق یک مستطیل تو پر رسم می کند.

 

متد clearRect()

این متد یک قسمت از مستطیل را به همان اندازه ای که مشخص کردیم پاک می کند.

 

مثال اول

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

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

        for (var column = 0, color = 0; column < 20; column++) {
            for (var row = 0; row < 20; row++) {

                c.fillStyle = 'hsl(' + Math.random() * 360 + ',100%,50%)';
                c.fillRect(column * 100, row * 100, 50, 50);
                c.clearRect(column * 100, row * 100, 25, 25);

                c.lineWidth = 2;
                c.strokeStyle = 'hsl(' + Math.random() * 360 + ',100%,50%)';
                c.strokeRect(column * 100, row * 100, 20, 20);
            }
        }
    </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();

        for (var column = 0, color = 0; column < 20; column++) {
            for (var row = 0; row < 20; row++) {

                c.fillStyle = 'hsl(' + color + ',100%,50%)';
                c.fillStyle = 'hsl(' + Math.random() * 360 + ',100%,50%)';
                c.fillRect(column * 25, row * 25, 20, 20);
                color += 20;

                c.lineWidth = 2;
                c.strokeStyle = 'hsl(' + Math.random() * 360 + ',100%,50%)';
                c.strokeRect(column * 25, row * 25, 20, 20);
            }
        }
    </script>
</body>
</html>

خروجی

رسم مربع های برش داده شده در Canvas

دانلود

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

نظر / سوال

Captcha