بخش مقالات آکادمی | Articles
آخرین آموزش ها

مختصات در Canvas:

فضای HTML دوبعدی محسوب میشه و بالطبع دارای مختصات X و Y می باشد. گوشه بالا سمت چپ مختصات (0و0) داره. در قسمت قبل مشاهده نمودید که ما از متد (0,0,150,75)fillRect استفاده کردیم، این متد به این معنی است که : از مختصات (0و0) شروع کرده و یک مستطیل در ابعاد 150×75 پیکسل رسم کنه.

مثالی در مختصات:

اگر نشانگر ماوس خودتون رو روی مربع پایین  ببرین مختصات X و Y رو مشاهده خواهید نمود.

ترسیم یک خط:
برای رسم یک خط مستقیم در Canvas از متدهای زیر استفاده میکنیم:

  • (moveTo(x,y- بدین معنی که شروع خط ازین نقطه باشه.
  • (lineTo(x,y- بدین معنی که پایان خط در این نقطه باشه.

درواقع متد ()stroke وظیفه رسم کردن رو به عهده داره،مثل یک جوهر در خودکار عمل میکنه.

<!DOCTYPE html>
<html>
<body>

“canvas id=”myCanvas” width=”200″ height=”100>
<“;style=”border:1px solid #d3d3d3
Your browser does not support the canvas element
<canvas/>

<script>

;(“var canvas = document.getElementById(“myCanvas
;(“var ctx = canvas.getContext(“2d
;(ctx.moveTo(0,0
;(ctx.lineTo(200,100
;()ctx.stroke

<script/>

<body/>
<html/>

کد بالا به این صورت معنی میشه که از نقطه در موقعیت (0و0) شروع و در نقطه با موقعیت (100و200) به پایان میرسه. در آخر با متد ()stroke خط کشیده و رسم خواهد شد.

ترسیم یک دایره:

برای رسم یک دایره در canvas به روش زیر عمل میکنیم:

  • ()beginPath – برای شروع کردن یک مسیر
  • (arc(x,y,r,startangle,endangle – برای ساخت کمان یا منحنی. برای ساخت یک دایره با ()arc مقادیر start angel رو که شروع زاویه معنی میشه صفر و end angel که به معنی پایان زاویه هست رو 2x Math.PI قرار میدیم. همچنین X و Y مختصات طول و عرض مرکز دایره رو مشخص میکنه ودر نهایت پارامتر طول شعاع رو تعیین میکند.

<!DOCTYPE html>
<html>
<body>

“canvas id=”myCanvas” width=”200″ height=”100>
<“;style=”border:1px solid #d3d3d3
Your browser does not support the canvas element
<canvas/>

<script>
;(“var canvas = document.getElementById(“myCanvas
;(“var ctx = canvas.getContext(“2d
;()ctx.beginPath
;(ctx.arc(95,50,40,0,2*Math.PI
;()ctx.stroke
<script/>

<body/>
<html/>

با متد ()arc یک دایره تعریف بکنین و با متد ()stroke ترسیم اونو کامل کنین.

از همراهیتون ممنونم. با ما درادامه مقاله ها همراه باشین.

تاریخ ارسال
27 اردیبهشت 1395
ارسال شده توسط
محمدرضا تناکیان
میزان بازدید
0 نفر بازدیدکننده
0 دیدگاه
فایلی جهت دانلود وجود ندارد !
مشخصات
حجم و فرمت :

0 دیدگاه ثبت شده

شما هم نظری بدهید
هنوز دیدگاهی ثبت نشده
توجه فرمایید:
نظرات شما پس از بررسی و تایید نمایش داده می شود.
لطفا نظرات خود را فقط در مورد مطلب بالا ارسال کنید.

برچسب ها

, ,