طراحی با canvas (بخش دوم)

همانطور که در مقاله طراحی با canvas بخش اول، معرفی شد، تگ canvas ویژگی جدیدیست که در نسخه نهایی HTML5 ارائه گردیده و به کمک آن و البته به کمک زبان برنامه نویسی مانند JavaScript می توان اشکال دوبعدی همانند مستطیل، دایره، خطوط، حروف و البته تصاویر را طراحی نمود.

 <canvas id="shadowCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
</script>

shadowBlur: توسط این دستور می توانید میزان تاری سایه را تعیین نمایید.

shadowOffsetX: فاصله افقی (محور X) سایه با canvas به کمک این دستور تعیین میگردد.

shadowOffsetY: فاصله عمدی (محور Y) سایه با canvas به کمک این دستور تعیین میگردد.

shadowColor: توسط این دستور میتوانید رنگ سایه مورد نظر خود برای canvas را تخصیص دهید.

نکته: ترتیب نوشتن دستور سایه دقیقا باید همانند کد باشد در غیر این صورت کار نمی کند.

 <canvas id="gradiantCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c = document.getElementById("gradiantCanvas ");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, "#00ffe7");
grd.addColorStop(1, "#d000c9");
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 150, 100);
</script>

createLinearGradient: این دستور مختص ایجاد یک گرادیانت خطی می باشد و اغلب برای استفاده در محتوای canvas استفاده می شود.

addColorStop: این دستور به منظور تعیین نقطه ابتدایی و انتهایی و همچنین تعیین رنگ ابتدا و انتهای گرادیانت می باشد.

نکته: برای تعیین نقطه ابتدا و انتهای گرادیانت همانطور که در مثال بالا مشاهده می فرمایید، باید بصورت جدا جدا موقعیت و رنگ را تعیین نمایید.

createRadialGradient: این دستور گرادیانتی همانند دایره ایجاد میکنند.

<canvas id="gradiantCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c = document.getElementById("gradiantCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "#00ffe7");
grd.addColorStop(1, "#d000c9");
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 100);
</script>

			

<p>Image to use:</p>

<p&lgt; Canvas: </p>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> </canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("lamp")
img.src = 'img_lamp.jpg';
img.onload = function() {
  var pattern = ctx.createPattern(img, 'repeat');
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 400, 400);
};
</script>

CreatePattern: این دستور برای ایجاد پترن در canvas استفاده میشود.

اولین مقداری که این دستور می گیرد، مربوط به src تصویر و یا متغیریست که در ابتدای کد ها جیکوئری به تصویر اختصاص داده ایم و مقدار دوم مربوط به نحوه تکرار تصویر می باشد.

لازم به ذکر است که چهار مقدار زیر برای پارامتر دوم در نظر گرفته شده است:

Repeat: این مقدار تصویر را بر حسب محور مختصات X و Y تکرار میکند.

No-repeat: این مقدار فقط یکبار تصویر را در محیط تخصیص داده شده نمایش می دهد.

Repeat-X: این مقدار تصویر را فقط بر حسب محور مختصا X تکرار میکند.

Repeat-Y: این مقدار تصویر را فقط بر حسب محور مختصات Y تکرار میکند.