آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش کن وس Path در HTML

دوره های مرتبط با این مقاله

چگونه یک مسیر بکشیم؟

ابتدا باید یک خط بکشیم. در اینجا چگونگی کشیدن خط قهوه ای به شما ارائه شده است.

<div>
                    <canvas id="Canvas2" width="600" height="200" style="border:solid 1px #000000;"></canvas>
   ‎  <div>
       ‎    <button onclick="Vertical_line();return true;">Click me to draw a brown vertical line</button>
   </div>
</div>‎
<script>
‎  var c3 = document.getElementById("c3");
‎  var c3_context = c3.getContext("2d");
‎‎  function Vertical_line() {
‎    c3_context.moveTo(300, 10);
‎    c3_context.lineTo(300, 190);
‎    c3_context.strokeStyle = "brown";
‎    c3_context.stroke();
‎  }
‎</script>‎

روش هایی که واقعا در اینجا اتفاق می افتند، عبارتند از moveTo ، lineTo، stroke، و strokeStyle.

Descriptions
Context method
حرکت به نقطه ی آغاز با مختصات x و y.
moveTo(x,y)
از نقطه ی شروع به این نقطه خطی بکشید. دوباره x و y مختصات باشند.
lineTo(x,y)
رنگ CSS خط
strokeStyle
روشی که در واقع باعث می شود جاوا اسکریپت خط بکشد.
stroke
قبل از اینکه شروع به کشیدن خط جدید با رنگ متفاوت کنید، باید beginPath را فرا بخوانید.
beginPath

نمایش آن را در زیر چک کنید، که روش beginPath نقش مهمی دارد. بدون آن آخرین stroke خط قبلی را با آخرین رنگ strokeStyle فراخوانده شده، دوباره ترسیم می کند.

<div>
   ‎<canvas id="c4" width="600" height="200" style="border:solid 1px #000000;"></canvas>
   ‎<div>
       ‎ <button onclick="Vertical_2px_Red();return true;">Vertical 2px Red line</button>
       ‎ <button onclick="Vertical_1px_Blue();return true;">Vertical 1px Blue line</button>
       ‎ <button onclick="Horizontal_2px_Green();return true;">Horizontal 2px Green line</button>
       ‎ <button onclick="Clear_line();return true;">Erase Everything</button>
   </div>
</div>
<script>
    var c4 = document.getElementById("c4");
    var c4_context = c4.getContext("2d");
‎   function Vertical_2px_Red() {
    c4_context.beginPath();
    c4_context.moveTo(300, 10);
    c4_context.lineTo(300, 190);
    c4_context.strokeStyle = "Red";
    c4_context.stroke();
   ‎}
‎   function Vertical_1px_Blue() {
    c4_context.beginPath();
    c4_context.moveTo(350.5, 10);
    c4_context.lineTo(350.5, 190);
    c4_context.strokeStyle = "Blue";
    c4_context.stroke();
   ‎}
‎   function Horizontal_2px_Green() {
    c4_context.beginPath();
    c4_context.moveTo(100, 100);
    c4_context.lineTo(500, 100);
    c4_context.strokeStyle = "Green";
    c4_context.stroke();
   ‎}
‎   function Clear_line() {
    c4_context.clearRect(1, 1, 600, 190);
   ‎}
‎</script>‎

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

c4_context.moveTo(300, 10);
c4_context.lineTo(300, 190);

و

c4_context.moveTo(300.5, 10);
c4_context.lineTo(300.5, 190);

برای کشیدن خطی با عرض یک پیکسل، مختصات را باید به سمت راست یا چپ به 0.5 پیکسل تغییر دهید. این امر به خاطر این است که مقدار صحیح مختصات قرار استدر حاشیه ی هر پیکسل درنظر گرفته شود. کشیدن خطدر لبه باعث خواهد شد که خط در سراسر دو پیکسل مجاور گسترده شود. با تغییر مختصات 0.5 پیکسل، خط هنوز بین دو پیکسل گسترده شده اما نیمی از هر پیکسل را اشغال می کند.

  • 3313
  •    1620
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .