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

canvas – Gradients:

ما می میونیم در canvas ها از خاصیت Gradient استفاده کنیم و مستطیل، دایره، خطوط، نوشته ها و غیره رو به شکل زیبایی پر کنیم و شکل هامون و به رنگهای یکدست محدود نکنیم. دونوع مختلف در gradient ها وجود داره:

  • (createLinearGradient(x,y,x1,y2 – برای ایجاد gradient خطی
  • (createRadialGradient(x,y,r,x1,y1,r1 – برای ایجاد gradient دایره ایی.

زمانی که ما بخوایم شی gradient داشته باشیم، باید دو یا چند شیء addColorStop اضافه کنیم. متد ()addColorStop توقف رنگ و موقعبت امتداد gradient رو مشخص میکنه. موقعیت gradiant میتونه در هرجایی بین 0 تا 1 تنظیم میشه.

برای استفاده از gradient ویژگی های fillStyle و strokeStyle رو به gradient تنظیم باید کرد سپس یک شکل ترسیم میکنیم.(مستطیل،متن یا خط)

استفاده از ()createLinearGradient:

ما قصد داریم یک مستطیل رسم کنیم و داخل اون یک gradient خطی ایجاد میکنم:

<!DOCTYPE html>
<html>
<body>
<canvas id=”myCanvas” width=”200″ height=”100″

style=”border:1px solid #d3d3d3;”>
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);   // Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,”red”);
grd.addColorStop(1,”white”);   // Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>

استفاده از ()createRadialGradient:

ما در این قسمت قصد داریم در همون مستطیل که ایجاد میکنیم یک gradient دایره ای ایجاد کنیم و مستطیل رو با اونها پر میکنیم.

 <!DOCTYPE html>
<html>
<body>
<canvas id=”myCanvas” width=”200″ height=”100″
style=”border:1px solid #d3d3d3;”>
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);   // Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,”red”);
grd.addColorStop(1,”white”);   // Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>

canvas – Images :

برای ترسیم یک عکس در canvas باید از متد زیر استفاده کنیم:

  • drawImage(image,x,y)

<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id=”scream” width=”220″ height=”277″src=”pic_the_scream.jpg” alt=”The Scream”>
<p>Canvas:</p>
<canvas id=”myCanvas” width=”240″ height=”297″style=”border:1px solid #d3d3d3;”>
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
window.onload = function() {
var canvas = document.getElementById(“myCanvas”);
var ctx = canvas.getContext(“2d”);
var img = document.getElementById(“scream”);
ctx.drawImage(img, 10, 10);
};
</script>
</body>
</html>

ما نمیتونیم یک عکس رو قبل از بارگذاریش اونو ترسیم کنیم. با فراخوانی تابع ()window.onload این مشکل رو حل میکنیم.

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

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

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

برچسب ها

, ,