یک پرش سه روزه برای یادگیری HTML5 : برسی Canvas و SVG

[two_third]

به پرش دوم از سری مقالات یک پرش سه روزه برای یادگیری HTML5 رسیدیم ، در قسمت اول به یک سری مفاهیم پایه اما بسیار مهم در HTML5 پرداختیم.امروز به صورت عمیق تری به مفاهیم پیشرفته خواهیم پرداخت.برسی بیشتری را روی Canvas و SVG انجام میدیم و تمریناتی را جهت درک بیشتر مطلب ارائه میدهیم.همراه من باشید.

مقدمه

در روز اول به صورت عمده روی مطالب زیر تمرکز کردیم:

  • تگ ها و کنترل های جدید
  • ویژگی های جدید اعتبارسنجی
  • Application cache
[/two_third]

 

[one_third_last]


برسی Canvas و SVG

[/one_third_last]

برسی Canvas و SVG

[divider style=”normal” top=”10″ bottom=”10″]

فهرست مطالب

  • تمرین ۱۲ – کار با Canvas
  • تمرین ۱۳ – کار با SVG
  • مقایسه Canvas با SVG
[divider style=”normal” top=”10″ bottom=”10″]

 

تمرین ۱۲ – کار با Canvas

Canvas چیست؟

Canvas مانند یک بوم نقاشی است.

  • یک صفحه مستطیلی با طول و عرض مشخص را فراهم می کند.
  • و ما با استفاده از api جدید HTML5 JavaScript می توانیم اشکال مختلف در اندازه، رنگ و الگوهای متفاوت را در این صفحه مستطیلی (Canvas) رسم کنیم.

با یک تمرین بیشتر با Canvas آَشنا می شویم.

تنظیمات اولیه

گام اول:

یک صفحه HTML ایجاد می کنیم.

 

<html><head></head><body></body></html>

گام دوم:

یک Canvas به صورت زیر در تگ body ایجاد می کنیم.

<canvas id="MyCanvas" width="500px" height="500px" style="border:1px solid black;"> </canvas>

گام سوم:

یک تگ Script در بخش head ایجاد می کنیم:

<head> <script type="text/javascript"> </script> </head>

گام چهارم:

یک تابع جاوااسکریپت با عنوان “Draw” ایجاد کرده و در تگ script قرار می دهیم.

درون این تابع به شی canvas دسترسی پیدا می کنیم.

 

function Draw()

{
        var ctx = document.getElementById('MyCanvas').getContext("2d");      
        //Canvas Code Comes Here
}

 

تمرین ۱-۱۲ – کار با Path

Path چیست؟

  • Path لیستی از صفر یا بیشتر sub path می باشد.
  • هر sub path لیستی از صفر یا بیشتر end point می باشد.
  • هر end point در یک sub path با یک خط راست یا خط های منحنی به یکدیگر متصل خواهند شد.

تمرین ۱-۱-۱۲ – ایجاد path تنها با استفاده از Begin path

کد:

 

ctx.beginPath();

ctx.strokeStyle = "blue";

ctx.moveTo(75, 50);

ctx.lineTo(75, 100);

ctx.stroke();

ctx.strokeStyle = "red";

ctx.lineTo(25, 100);

ctx.stroke();

خروجی:

برسی Canvas و SVG

توضیحات:

در مثال بالا، path کامل از دو sub path تشکیل شده است.

  • BeginPath() – یک path جدید ایجاد می کند.
  • ما ابتدا ساختار را با sub pathها ایجاد کرده و سپس به کمک متد stroke همه این sub path ها را به طور همزمان stroke???? کردیم.
  • strokeStyle برای تنظیم استایل کنونی استفاده می شود.
  • هر باری که متد stroke صدا زده می شود، همه sub path ها در استایل کنونی stroke می شوند.
  • در مثال بالا،
    • متد stroke اول، sub path ها را در مختصات بین (۵۰و۷۵) و (۱۰۰و۷۵) به رنگ آبی رسم می کند.
    • متد stroke دوم، دو sub path هر دو به رنگ قرمز رسم می کند.
      • یکی بین مختصات (۵۰و۷۵) و (۱۰۰و۷۵)
      • و دومی بین (۱۰۰و۷۵) و (۱۰۰و۲۵)

(به همین دلیل است که sub path اول در canvas نه آبی است و نه قرمز و ترکیبی از این دو تاست.)

تمرین ۲-۱-۱۲ – ایجاد path با چندین Begin Path

کد:

 

ctx.beginPath();

ctx.strokeStyle = "blue";

ctx.moveTo(75, 50);

ctx.lineTo(75, 100);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(75, 100);

ctx.strokeStyle = "red";

ctx.lineTo(25, 100);

ctx.stroke();

خروجی:

برسی Canvas و SVG

تمرین ۳-۱-۱۲ – معرفی ClosePath

کد:

ctx.beginPath();

ctx.strokeStyle = "blue";

ctx.moveTo(75, 50);

ctx.lineTo(75, 100);

ctx.lineTo(25, 100);

ctx.closePath();

ctx.stroke();

خروجی:

برسی Canvas و SVG

توضیحات

closePath – lineTo نقطه شروع و پایان را مشخص می کند و closePath خطی از نقطه جاری به نقطه شروع رسم می کند.

تمرین ۴-۱-۱۲ – معرفی Fill

کد:

ctx.beginPath();

ctx.moveTo(75, 50);

ctx.lineTo(75, 100);

ctx.lineTo(25, 100);

ctx.fillStyle = "red";

ctx.fill();

خروجی:

برسی Canvas و SVG

تمرین ۵-۱-۱۲ – رسم خط منحنی

کد:

ctx.beginPath();

ctx.moveTo(175, 50)

ctx.quadraticCurveTo(60, 360, 175, 300);

ctx.stroke()

خروجی:

برسی Canvas و SVG

توضیحات:

تابع quardaticCurveTo چهار پارامتر می گیرد.

دو نقطه اول، نقاط کنترلی هستند که برای محاسبات quadratic Bezier استفاده می شوند و دو نقطه آخر، نقاط پایانی برای منحنی هستند.

تمرین ۲-۱۲ – کار با مستطیل

تمرین ۱-۲-۱۲ – رسم مستطیل

کد:

ctx.fillStyle="red";

ctx.fillRect(75, 75, 150, 150);

           

ctx.strokeStyle = "black";

ctx.lineWidth = 5;

ctx.strokeRect(175,175,150,150);

خروجی:

برسی Canvas و SVG

تمرین ۲-۲-۱۲ – پاک کردن مستطیل

کد:

ctx.fillStyle="red";

ctx.fillRect(75, 75, 250, 250);

ctx.clearRect(125, 125, 100, 100);

خروجی:

برسی Canvas و SVG

تمرین ۳-۱۲ – کار با Gradient

تمرین ۱-۳-۱۲ – کار با Gradient خطی

کد:

var grd = ctx.createLinearGradient(75, 75, 225, 75);

grd.addColorStop(0, "black");

grd.addColorStop(0.2, "magenta");

grd.addColorStop(0.4, "blue");

grd.addColorStop(0.6, "green");

grd.addColorStop(0.8, "yellow");

grd.addColorStop(1, "red");

ctx.fillStyle = grd

ctx.fillRect(75, 75, 150, 150);

خروجی:

برسی Canvas و SVG

توضیحات:

  • تابع CreateLinearGradient نیز چهار پارامتر x1، y1، x2، y2 را می گیرد.
  1. زمانی که x1=x2 و y1!=y2 باشد، جهت گرادیان افقی خواهد بود.
  2. زمانی که x1!=x2 و y1=y2 باشد، جهت گرادیان عمودی خواهد بود.
  3. زمانی که x1!=x2 و y1!=y2 باشد، جهت گرادیان قطری خواهد بود.
  • تابع AddColorStop دو پارامتر می گیرد.
  1. عددی بین ۰ و ۱ که موقعیت بین شروع و پایان گرادیان را مشخص می کند.
  2. رنگ

تمرین ۲-۳-۱۲ – کار با Radial Gradient

کد:

var grd = ctx.createRadialGradient(150, 150, 5, 150, 150,85);

grd.addColorStop(0, "orange");

grd.addColorStop(0.2, "magenta");

grd.addColorStop(0.4, "blue");

grd.addColorStop(0.6, "green");

grd.addColorStop(0.8, "yellow");

grd.addColorStop(1, "red");

ctx.fillStyle = grd

ctx.fillRect(75, 75, 150, 150);

خروجی:

برسی Canvas و SVG

توضیحات:

CreateRadialGradient شش پارامتر x1، y1، r1، x2، y2، r2 را می گیرد.

  1. X1، y1، r1 مرکز و شعاع دایره شروع را مشخص می کند.
  2. X2، y2، r2 مرکز و شعاع دایره پایان را مشخص می کند.

گرادیان با دایره آغازین شروع شده و به سمت دایره پایانی حرکت می کند.

تمرین ۴-۱۲ – کار با دایره

کد:

ctx.beginPath();

ctx.fillStyle="yellow";

ctx.strokeStyle="green";

ctx.lineWidth = "8";

ctx.arc(100, 175, 85, 0, 2*Math.PI);

ctx.fill();

ctx.stroke();


ctx.beginPath();

ctx.fillStyle = "green";

ctx.strokeStyle = "yellow";

ctx.lineWidth = "8";

ctx.arc(285, 175, 85, 0, 1 * Math.PI);

ctx.fill();

ctx.stroke();

خروجی:

برسی Canvas و SVG

توضیحات:

تابع DrawArc پنج آرگومان x,y,r,sa,ea را می گیرد.

  • X و y مرکز دایره را مشخص می کنند.
  • r شعاع دایره می باشد.
  • Sa و ea زاویه شروع و پایان دایره هستند.

زاویه می تواند با هر دو مقیاس درجه و رادیان اندازه گیری شود.

در مورد رادیان، ثابت ریاضی PI نصف دایره را مشخص می کند و ۲*PI یک دایره کامل را مشخص می کند.

تمرین ۵-۱۲ – کار با متن

کد:

ctx.beginPath();

ctx.font = "30px Segoe UI";

ctx.fillText("www.StepByStepSchools.Net",0, 150);

 

توضیحات:

تابع fillText/strokeText سه آرگومان می گیرد:

  1. متن
  2. مختصات x و y

تمرین ۶-۱۲ – Scale

کد:

ctx.strokeRect(75, 75, 75, 75);

ctx.scale(2,2);

ctx.strokeRect(75, 75, 75, 75);

خروجی:

برسی Canvas و SVG

توضیحات:

متد Scale به سادگی موقعیت و قطر تمام رسم های بعدی را مقیاس بندی می کند.

در مثال بالا با ۲۰۰% مقیاس بندی شده است.

تمرین ۷-۱۲- Rotate

کد:

ctx.rotate(0.2);

ctx.strokeRect(75, 75, 75, 75);

خروجی:

برسی Canvas و SVG

توضیحات:

اشکالی را که رسم می شوند با زاویه مشخص شده، Rotate می کند.

تمرین ۸-۱۲ – Translate

کد:

ctx.strokeRect(0, 0, 150, 150);

ctx.translate(150, 150);

ctx.strokeRect(0, 0, 150, 150);

خروجی:

برسی Canvas و SVG

توضیحات:

متد Translate مختصات (۰و۰)  مربوط به canvas را remap می کند.

نکته: همچنین می توانیم از متد settransform استفاده کنیم که به طور همزمان به ما امکان scale، rotate و translate را می دهد.

تمرین ۹-۱۲ – ذخیره و بازیابی وضعیت canvas

کد:

ctx.fillStyle="red";

ctx.fillRect(75, 75, 150, 150);


ctx.fillStyle = "blue";             

ctx.fillRect(90, 90, 50, 50);


ctx.save();


ctx.fillStyle = "yellow";

ctx.fillRect(90, 160, 50, 50);


ctx.save();

ctx.fillStyle = "green";

ctx.restore();

ctx.restore();

ctx.fillRect(160, 160, 50, 50);

خروجی:

برسی Canvas و SVG

توضیحات:

متد Save، وضعیت کنونی canvas را در آن ذخیره می کند.

متد restore، وضعیت ذخیره شده را از stack، pop کرده و دوباره در canvas قرار می دهد.

تمرین ۱۰-۱۲ – کار با Image

کد:

vari = new Image();
i.src = "Desert.jpg";
i.onload = function () {
    //Draw Squqre
ctx.strokeStyle = "green";
ctx.lineWidth = 5;
ctx.drawImage(i, 0, 0);
ctx.strokeRect(60, 120, 70, 80);

    //draw Text
ctx.strokeStyle = "yellow";
ctx.font = "30px Segoe UI";
ctx.lineWidth = 1;
ctx.strokeText("My Home", 80, 40);

    //Draw Arrow
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.lineWidth = 2;
ctx.moveTo(110, 110);
ctx.lineTo(125, 40);

ctx.moveTo(110, 110);
ctx.lineTo(100, 90);

ctx.moveTo(110, 110);
ctx.lineTo(126, 95);
ctx.stroke();
};

خروجی:

برسی Canvas و SVG

تمرین ۱۱-۱۲ – انیمیشن با استفاده از canvas

  • زمانی که ما چیزی در canvas می کشیم، نمی توانیم آن را تغییر بدهیم. برای تغییر در اشکال موجود در canvas:
  1. اشکال موجود را با کمک تابع “clearRect” پاک می کنیم.
  2. دوباره آن را با صفات جدید می کشیم.
  • زمانی که استراتژی بالا، با توابع جاوا اسکریپت مانند Timeout یا Windows.SetInterval ترکیب می شود، تبدیل به انیمیشن خواهد شد.

کد:

var interval;
var x = 0, y = 0;
functiondrawInAnimation()
{
varctx = document.getElementById('MyCanvas').getContext("2d");

ctx.beginPath();
ctx.moveTo(x, y);
ctx.clearRect(x , y, 50, 50);
if (x >document.getElementById('MyCanvas').width) {

        x = 0;
        y += 50;
if (y + 50 >document.getElementById('MyCanvas').height)
        {
            x = 0; y = 0;
        } 
    }
else {
        x += 15;
    }
ctx.fillStyle = getRndColor();
ctx.fillRect(x, y,50,50);
}
functiongetRndColor() {
var r = 255 * Math.random() | 0,
        g = 255 * Math.random() | 0,
        b = 255 * Math.random() | 0;
    return 'rgb(' + r + ',' + g + ',' + b + ')';
}

interval = setInterval("drawInAnimation()", 15);

خروجی:

برسی Canvas و SVG

نکته: تصویر بالا، نسخه GIF خروجی اصلی می باشد. به همین دلیل است که انیمیشن در وسط کار restart می شود، چرا که این یک انیمیشن HTML واقعی نمی باشد. برای مشاهده انیمیشن اصلی می توانید کد آن را در پایان مقاله دانلود نمایید.

تمرین ۱۳ – کار با SVG

درست مانند Canvas، SVG نیز به ما امکان رسم تصاویر در یک صفحه مستطیل شکل را می دهد. در ادامه تفاوت این دو را با هم می بینیم اما قبل از آن یک تمرین با SVG انجام می دهیم.

تنظیمات اولیه

گام اول:

یک صفحه HTML ایجاد می کنیم.

<html>

<head></head>

<body></body>

</html>

گام دوم:

یک Canvas به صورت زیر در تگ body ایجاد می کنیم.

<SVG id="MySVG" width="500px" height="500px" style="border:1px solid black;">

</SVG > 

تمرین ۱-۱۳ – کار با اشکال مختلف

به جای اینکه هر یک از شکل ها را مثل قبل تک به تک امتحان کنیم، در اینجا همه اشکال را با هم امتحان کرده و یک شکل خلاقانه ای ایجاد می کنیم.

<svg width="205" height="200">


    <!--surrounding border-->

    <rect x="0" y="0" width="205" height="200" style="fill: rgb(199, 240, 185);"> </rect>

    <!--surrounding border-->



    <!--Hat Start-->

    <rect x="78" y="10" width="44" height="70" style="fill: black; stroke: black; "></rect>

    <ellipse cx="100" cy="20" rx="67" ry="12" stroke="white"

                stroke-width="0.5" fill="black"></ellipse>          

    <!--Hat End-->



    <!--Left ear-->

    <ellipse cx="55" cy="70" rx="25" ry="25" stroke="black" stroke-width="2" fill="gray"></ellipse>


    <!--Right ear-->
    <ellipse cx="145" cy="70" rx="25" ry="25" stroke="black" stroke-width="2" fill="gray"></ellipse>


    <!--Face-->

    <circle cx="100" cy="105" r="50" stroke="black" stroke-width="2" fill="rgb(230, 231, 194)" />


    <!--Left Eye-->

    <ellipse cx="75" cy="95" rx="10" ry="20"

                style="fill:white;stroke:black;stroke-width:1" />

    <!--Left Eye ball-->

    <ellipse cx="80" cy="95" rx="5" ry="12"

                style="fill:black;stroke:black;stroke-width:1" />


    <!--Right Eye-->

    <ellipse cx="125" cy="95" rx="10" ry="20"

                style="fill:white;stroke:black;stroke-width:1" />

    <!--Right Eye ball-->

    <ellipse cx="120" cy="95" rx="5" ry="12"

                style="fill:black;stroke:black;stroke-width:1" />


    <!--Mouth start-->

    <clipPath id="cut-off-bottom">

        <rect x="70" y="135" width="60" height="30" />

    </clipPath>

    <ellipse cx="100" cy="125" rx="30" ry="20" clip-path="url(#cut-off-bottom)"

                style="fill:rgb(230, 231, 194);stroke:black;stroke-width:2" />

    <!--Mouth End-->


    <!--Nose-->

    <polygon points="100,115 85,125 115,125"

                style="fill: brown;

            stroke-width: 1" />


    <!--Divider-->

    <line x1="0" y1="165" x2="205" y2="165" style="stroke:brown;

stroke-width:2" />

    <text x="25" y="185" font-family="Comic Sans MS'" fill="Blue" >A coder can be creative</text>

</svg>

خروجی:

برسی Canvas و SVG

تمرین ۱-۱۳ – انیمیشن های SVG

برنامه نویسی به صورت declarative در SVG، ایجاد انیمیشن را آسان تر می کند. بنابراین اجازه دهید که دو انیمیشن به تصویر بالا اضافه کنیم.

کد – تنظیمات اولیه

<svg width="205" height="220">
	
        <rect x="0" y="0" width="205" height="220" style="fill: rgb(199, 240, 185);">
        </rect>

....
</svg>

کد – انیمیشن چشم ها

<!--Left Eye-->

        <ellipse cx="75" cy="95" rx="15" ry="15"

                    style="fill:white;stroke:black;stroke-width:1" />

        <!--Left Eye ball-->

        <ellipse cx="75" cy="95" rx="5" ry="5"

                    style="fill:black;stroke:black;stroke-width:1">

            <animate attributeName="cx" attributeType="XML"

                        from="75" to="85" id="Left1" repeatCount="1"

                        begin="0s;Left5.end" dur="0.5s" />

            <set attributeName="cx" attributeType="XML"

                    to="85"

                    begin="Left1.end" />


            <animateTransform attributeName="transform"

                                type="rotate" id="Left2"

                                from="0 75 95" to="360 75 95"

                                begin="Left1.end" dur="1s"

                                repeatCount="3">

            </animateTransform>

            <animate attributeName="cx" attributeType="XML"

                        from="85" to="65" id="Left3"

                        begin="Left2.end" dur="0.5s" />

            <set attributeName="cx" attributeType="XML"

                    to="65"

                    begin="Left3.end" />


            <animateTransform attributeName="transform"

                                type="rotate" id="Left4"

                                from="360 75 95" to="0 75 95"

                                begin="Left3.end" dur="1s"

                                repeatCount="3">

            </animateTransform>

            <animate attributeName="cx" attributeType="XML"

                        from="65" to="75" id="Left5"

                        begin="Left4.end" dur="0.5s" />

            <set attributeName="cx" attributeType="XML"

                    to="75"

                    begin="Left4.end" >

            </set>

        </ellipse>

<!--Right Eye-->

        <ellipse cx="125" cy="95" rx="15" ry="15"

                    style="fill:white;stroke:black;stroke-width:1" />

        <!--Right Eye ball-->

        <ellipse cx="125" cy="95" rx="5" ry="5" style="fill:black;stroke:black;stroke-width:1">

            <animate attributeName="cx" attributeType="XML"

                        from="125" to="135" id="Right1" repeatCount="1"

                        begin="0s;Right5.end" dur="0.5s" />

            <set attributeName="cx" attributeType="XML" to="135" begin="Right1.end" />


            <animateTransform attributeName="transform"

                                type="rotate" id="Right2"

                                from="0 125 95" to="360 125 95"

                                begin="Right1.end" dur="1s"

                                repeatCount="3">

            </animateTransform>

            <animate attributeName="cx" attributeType="XML"

                        from="135" to="115" id="Right3"

                        begin="Right2.end" dur="0.5s" />

            <set attributeName="cx" attributeType="XML"

                    to="115"

                    begin="Right3.end" />


            <animateTransform attributeName="transform"

                                type="rotate" id="Right4"

                                from="360 125 95" to="0 125 95"

                                begin="Right3.end" dur="1s"

                                repeatCount="3">

            </animateTransform>

            <animate attributeName="cx" attributeType="XML"

                        from="115" to="125" id="Right5"

                        begin="Right4.end" dur="0.5s" />

            <set attributeName="cx" attributeType="XML" to="125" begin="Right4.end" />

        </ellipse>

کد – انیمیشن دهان

<clipPath id="cut-off-bottom">

    <rect x="70" y="135" width="60" height="11">


        <animate attributeName="y" attributeType="XML"

                    from="135" to="125" id="MouthClipAnimation1"

                    begin="0;MouthClipAnimation3.end+3" dur="1s" />

        <animate attributeName="height" attributeType="XML"

                    from="11" to="22" id="MouthClipAnimation2"

                    begin="0;MouthClipAnimation4.end+3" dur="1s" />


        <set attributeName="y" attributeType="XML"

                to="125"

                begin="MouthClipAnimation1.end-0.1" />

        <set attributeName="height" attributeType="XML"

                to="22"

                begin="MouthClipAnimation2.end-0.1" />


        <animate attributeName="y" attributeType="XML"

                    from="125" to="135" id="MouthClipAnimation3"

                    begin="MouthClipAnimation1.end+3" dur="1s" />

        <animate attributeName="height" attributeType="XML"

                    from="22" to="11" id="MouthClipAnimation4"

                    begin="MouthClipAnimation2.end+3" dur="1s" />


        <set attributeName="y" attributeType="XML"

                to="135"

                begin="MouthClipAnimation3.end-0.1" />

        <set attributeName="height" attributeType="XML"

                to="11"

                begin="MouthClipAnimation4.end-0.1" />

    </rect>

</clipPath>

<ellipse cx="100" cy="125" rx="30" ry="20" clip-path="url(#cut-off-bottom)"

            style="fill:rgb(230, 231, 194);stroke:black;stroke-width:2">


    <animate attributeName="cy" attributeType="XML"

                from="125" to="135" id="MouthEllipseAnimation1"

                begin="0;MouthEllipseAnimation4.end+3" dur="1s" />

    <animate attributeName="rx" attributeType="XML"

                from="30" to="8" id="MouthEllipseAnimation2"

                begin="0;MouthEllipseAnimation5.end+3" dur="1s" />

    <animate attributeName="ry" attributeType="XML"

                from="20" to="8" id="MouthEllipseAnimation3"

                begin="0;MouthEllipseAnimation6.end+3" dur="1s" />

    <set attributeName="cy" attributeType="XML"

            to="135"

            begin="MouthEllipseAnimation1.end-0.1" />

    <set attributeName="rx" attributeType="XML"

            to="8"

            begin="MouthEllipseAnimation2.end-0.1" />

    <set attributeName="ry" attributeType="XML"

            to="8"

            begin="MouthEllipseAnimation3.end-0.1" />


    <animate attributeName="cy" attributeType="XML"

                from="135" to="125" id="MouthEllipseAnimation4"

                begin="MouthEllipseAnimation1.end+3" dur="1s" />

    <animate attributeName="rx" attributeType="XML"

                from="8" to="30" id="MouthEllipseAnimation5"

                begin="MouthEllipseAnimation2.end+3" dur="1s" />

    <animate attributeName="ry" attributeType="XML"

                from="8" to="20" id="MouthEllipseAnimation6"

                begin="MouthEllipseAnimation3.end+3" dur="1s" />

    <set attributeName="cy" attributeType="XML"

            to="125"

            begin="MouthEllipseAnimation4.end-0.1" />

    <set attributeName="rx" attributeType="XML"

            to="30"

            begin="MouthEllipseAnimation5.end-0.1" />

    <set attributeName="ry" attributeType="XML"

            to="20"

            begin="MouthEllipseAnimation6.end-0.1" />

</ellipse>

کد – انیمیشن کادر پایین تصویر

<!--Box Anmation-->

        <rect x="0" y="165" width="14" height="14"

              stroke-width="2" fill="brown">

            <animate attributeName="width" attributeType="XML"

                     from="0" to="210" id="leftToRight"

                     begin="0;bottomToTop.end" dur="1s" />

            <set attributeName="width" attributeType="XML"

                 to="14"

                 begin="leftToRight.end-0.2" />

            <set attributeName="x" attributeType="XML"

                 to="191"

                 begin="leftToRight.end-0.2" />


            <animate attributeName="height" attributeType="XML"

                     from="14" to="55" id="topToBottom"

                     begin="leftToRight.end" dur="1s" />

            <set attributeName="height" attributeType="XML"

                 to="14"

                 begin="topToBottom.end-0.2" />

            <set attributeName="y" attributeType="XML"

                 to="206"

                 begin="topToBottom.end-0.2" />


            <animate attributeName="width" attributeType="XML"

                     from="0" to="210" id="rightToLeft"

                     begin="topToBottom.end" dur="1s" />

            <animate attributeName="x" attributeType="XML"

                     from="206" to="0" id="rightToLeft"

                     begin="topToBottom.end" dur="1s" />

            <set attributeName="width" attributeType="XML"

                 to="14"

                 begin="rightToLeft.end-0.2" />

            <set attributeName="x" attributeType="XML"

                 to="0"

                 begin="rightToLeft.end-0.2" />


            <animate attributeName="height" attributeType="XML"

                     from="14" to="55" id="bottomToTop"

                     begin="rightToLeft.end" dur="1s" />

            <animate attributeName="y" attributeType="XML"

                     from="206" to="165" id="bottomToTop"

                     begin="rightToLeft.end" dur="1s" />

            <set attributeName="height" attributeType="XML"

                 to="14"

                 begin="bottomToTop.end-0.2" />

            <set attributeName="y" attributeType="XML"

                 to="165"

                 begin="bottomToTop.end-0.2" />

        </rect>


        <line x1="0" y1="165" x2="205" y2="165" style="stroke:brown;

stroke-width:2" />

        <text x="14" y="200" font-family="Comic Sans MS'" fill="Blue">A coder can be creative</text>

خروجی :

برسی Canvas و SVG

مقایسه SVG با Canvas

اجازه دهید که تفاوت های کلیدی بین SVG و Canvas را لیست کنیم.

  • Vector در مقایسه با Pixel

Canvas بر مبنای Pixel است در حالی که SVG براساس Vector می باشد.

خروجی زیر را مشاهده کنید:

برسی Canvas و SVG

برسی Canvas و SVG

 

به زبان ساده تر، resolution تصاویر SVG وابسته به سایز نیست اما Canvas وابسته به اندازه تصویر می باشد.

  • XML در مقایسه با JavaScript

درباره SVG ما تمام خطوط و اشکال را با کمک تگ های معنا یی (xml tags) رسم کردیم در حالی که در Canvas تنها راه حل جاوا اسکریپت بود.

در SVG هر شکل به عنوان یک المنت ایجاد می شود. با استفاده از توابع جاوا اسکریپت مانند “document.getElementById” می توان به این المنت ها دسترسی پیدا کرد و ویژگی های آن ها را به صورت داینامیک تغییر داد.

  • پشتیبانی event handler

Canvas از event handler پشتیبانی نمی کند، درحالی که SVG این قابلیت را دارد.

کد زیر را مشاهده کنید:

HTML

<svg width="120" height="120">

        <circle cx="60" cy="60" r="25" stroke="green"  id="MyCircle"

            stroke-width="8" fill="yellow" onmouseover="IncreaseSize();" onmouseout="DecreaseSize();" />

    </svg>

<input type="button" value="+" onclick="ChangeSize();">

جاوا اسکریپت:

<script type="text/javascript">

    function IncreaseSize ()

    {

                    document.getElementById("MyCircle").r.baseVal.value=50;

    }

    function DecreaseSize()

    {

        document.getElementById("MyCircle").r.baseVal.value = 25;

    }

</script

خروجی:

برسی Canvas و SVG

  • قابلیت ذخیره تصویر

نتیجه نهایی در canvas یک image خواهد بود، که به سادگی می توانیم با استفاده از رفتارهای پیش فرض مرورگرها با گزینه “save images as” آن را ذخیره کنیم.

برسی Canvas و SVG

 

اما برای SVG این امکان وجود ندارد.

آنچه در قسمت سوم خواهید دید:

  • تمرین ۱۴ و ۱۵ – HTML5 Media – Video
  • تمرین ۱۶ و ۱۷ – HTML5 Media – Audio
  • تمرین ۱۸ و ۱۹ – Drag and Drop
  • تمرین ۲۰ – Geo Location
  • تمرین ۲۱ – Geo Location با استفاده از Google map
  • تمرین ۲۲ – Web Worker
  • تمرین ۲۳ – Web Worker و Ajax

این هم از قسمت دوم، فقط یک گام تا پایان پرش سه روزه باقی مونده، امیدوارم لذت برده باشید.

 

فاطمه زکایی

فاطمه زکایی هستم. فارغ التحصیل کارشناسی مهندسی نرم افزار، مدت سه سال هست که در زمینه توسعه اپلیکیشن های تحت وب و اندروید و همچنین تولید محتوای تخصصی برنامه نویسی تحت وب و اندروید در مجموعه mspsoft در خدمت شما هستم.

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

    سارا کیانی پاسخ

    سلام
    ممنون از آموزش تون.
    کاش فایل های نمونه ای را هم که کدنویسی کردین به همراه خروجی PDF پیوست میکردین.

      مسعود شریفی پاسخ

      سلام انجام میشود

        مجید پاسخ

        سلام، برای درس روز اول کل مطالب رو طی یک فایل pdf برای دانلود قرار دادین، می خواستم اگه امکان داره دروس این روز رو هم طی یک فایل pdf برای دانلود قرار بدین
        ممنون از سایت خوبتون

    حسام پاسخ

    سلام
    خیلی عالی بود
    با نظرات قبلی دوستان موافقم بعلاوه اینکه لینک های پرش های بعدی را در پرش های قبلی بیاورید.

    تشکر

      مسعود شریفی پاسخ

      انجام میشود.

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