آموزش تگ کانوس (canvas) – قسمت سوم

دایره در کانواس canvas covcle

متدی نیز در کانواس برای کشیدن یک دایره وجود دارد به نام Arc که قالب کلی آن بصورت زیر می باشد.

Are (x.y. start . stop)

و در نهایت برای انجام عمل کشیدن دایره باید همانند مثال خط از یکی از متدهای mk استفاده کنیم. مانند fill ( )  یا stroke ( )   مثال : درج یک دایر : کد js

[html]
<p dir="RTL"><script></p>
<p dir="RTL" align="right">Var  codocu ment. Getflemen tby ID( "my caxras");</p>
<p dir="RTL" align="right">Var ctx. C. Get context ("zd");</p>
<p dir="RTL" align="right">Ctm . Begin path ( ) ;</p>
<p dir="RTL" align="right">Ctm. Arc (95,50,40,0,2 x math . PI);</p>
<p dir="RTL" align="right">Cat. Stroke ( ) ;</p>
<p dir="RTL">        </ script></p>
<p dir="RTL">[/html]

متن در کانواس

اگر قصد درج یک متن را در عامل کانواس دارید حتما به خصوصیات زیر توجه فرمایید.

تعیین فونت متن    font

کشیدن متن تو پر برای کانواس  filltemt (temt , x,y)

کشیدن متن تو خالی روی کانواس stroketemt (temt. X,y)

1 مثال : یک متن تو پر با ارتفاع 30 پیکسل روی عامل کانواس درج کنید.

[html]</p>
<p dir="RTL" align="right"><script></p>
<p dir="RTL" align="right">Var codocu ment. Getflemen tby ID( "my caxras");</p>
<p dir="RTL" align="right">Var ctx. C. Get context ("zd");</p>
<p dir="RTL" align="right">Ctm  font = "30 pm Arial"</p>
<p dir="RTL" align="right">Ctm filltemt (" hello ", 10, 50);</p>
<p dir="RTL" align="right">< / script</p>
<p dir="RTL">[/html]

در کدهای js مثال بالا اگر کد زیر را جایگزین خط 4 کنید متن ایجاد شده تو خالی خواهد بود.

Ctm. Stroke temt (“hello, 10, 50 );

     طیف رنگی canvas yeadient

بهتر است قبل از نحوه ایجاد طیف رنگی توضیحاتی درباره آن ارائه دهم. طیف رنگی بعضی مکانها بنا به نظر طراح وب سایت به جای رنگ مطلق یا همان (solid) استفاده می شود. این کار بعضی اوقات زیبایی خاصی به عامل مورد نظر می بخشد

طیف رنگی که در بعضی مواقع شیب رنگ نیز نامیده می شود از 2 یا چند رنگ ایجاد می شود که  ما بین این دو رنگ طیفی تشیکل شده  از همان 2 یا چند رنگ انتخاب شده است اشکال هندسی محدودیتی برای ؟؟ روی  عامل کانواس ندارند و طیف رنگی می تواند برای رنگ داخل 4 ضلعی ها، دایره ها، متن ها، خط ها و غیره استفاده شود.

 دو نوع متفاوت از طیف رنگی (gradient)  وجود دارند: در ج طیف رنگی بصورت موازی

 (x,y,x₁,y₁) cremtelinearyadient

درج طیفی حلقه ای یا دایره ای Cremte R?diml yradient (x,y, x₁,y₁,r₁)

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

متد Addcolor stop  انحصارا برای درج یک ایست رنگی است و می تواند در سر تاسر طیف رنگی قرار گیرد. برای اینکه یک طیف رنگی ایجاد کنید باید ابتدا خاصیت fillstyle( )  و یا  strocestyle ( )  را برای طیف رنگی (yeradient)  ثبت کنید. بعد از این عمل می توانید شکل هندسی مورد نظرتان را با زمینه طیف رنگی ایجاد کنید.

مثال : پر کردن 4 ضلیعی توسط طیف رنگی موازی

کد js:

[html]</p>
<p dir="RTL" align="right">(" نام ") var c= document . get Elememt by ID</p>
<p dir="RTL" align="right">Var ctm= c.getcontemt("2d");</p>
<p dir="RTL" align="right">Var grd = ctm. Createlineargradient (0, 0, 200, 0 );</p>
<p dir="RTL" align="right">Grd. Add color stop (0, "red");</p>
<p dir="RTL" align="right">Grd: Add color stop (1, "white");</p>
<p dir="RTL" align="right">[html/]</p>
<p dir="RTL">پر کردن رنگ شکل توسط طیف رنگی  ctm:fill styte = grd :</p>
<p dir="RTL">کشیدن شکل 4 ضلیعی: ctm. Fillrect (10, 10, 150,80)</p>
<p dir="RTL"> مثال :</p>
<p dir="RTL">پر کردن ، ضلعی توسط طیف رنگی دایره ای</p>
<p dir="RTL">کد js</p>
<p dir="RTL"> [html]</p>
<p dir="RTL" align="right">var c= document . get Elememt by ID( "my canvas");</p>
<p dir="RTL" align="right">Var   ctm= c.get contemt("2d");</p>
<p dir="RTL" align="right">Var   grd = ctm . Createlinear gradient (75/50/5/90/60/100);</p>
<p dir="RTL" align="right">Grd. Add color stop (0, "red");</p>
<p dir="RTL" align="right">Grd: Add color stop (1, "white");</p>
<p dir="RTL" align="right">Ctm. Fillstyle : grd;</p>
Ctm. Fillrect ( 10/10/150/80);

[/html]