آموزش کن وس 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.

نمایش آن را در زیر چک کنید، که روش 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);

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