شروع کار مقدماتی با HTML5 Canvas (جلسه 26) : انیمیشن مقدماتی - قسمت 3

دسته بندی: آموزش
زمان مطالعه: 6 دقیقه
۲۹ اردیبهشت ۱۳۹۶

html-canvas

در جلسات قبل توضیحاتی در مورد ساخت انیمیشن رو خدمتتون قرار دادیم و مثالهایی رو هم براتون زدیم تا بهتر با اون آشنا بشید. در این جلسه میخوایم دو مثال دیگر در مورد انیمیشن‌ها براتون قرار بدیم تا هم بیشتر با انیمیشنها آشنا بشید و هم اینکه قدرت انیمیشنها رو بیشتر درک کنید.

ساخت ساعت:

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

function clock() {
  var now = new Date();
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.save();
  ctx.clearRect(0, 0, 150, 150);
  ctx.translate(75, 75);
  ctx.scale(0.4, 0.4);
  ctx.rotate(-Math.PI / 2);
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'white';
  ctx.lineWidth = 8;
  ctx.lineCap = 'round';

  // Hour marks
  ctx.save();
  for (var i = 0; i < 12; i++) {
    ctx.beginPath();
    ctx.rotate(Math.PI / 6);
    ctx.moveTo(100, 0);
    ctx.lineTo(120, 0);
    ctx.stroke();
  }
  ctx.restore();

  // Minute marks
  ctx.save();
  ctx.lineWidth = 5;
  for (i = 0; i < 60; i++) {
    if (i % 5!= 0) {
      ctx.beginPath();
      ctx.moveTo(117, 0);
      ctx.lineTo(120, 0);
      ctx.stroke();
    }
    ctx.rotate(Math.PI / 30);
  }
  ctx.restore();
 
  var sec = now.getSeconds();
  var min = now.getMinutes();
  var hr  = now.getHours();
  hr = hr >= 12 ? hr - 12 : hr;

  ctx.fillStyle = 'black';

  // write Hours
  ctx.save();
  ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) *sec);
  ctx.lineWidth = 14;
  ctx.beginPath();
  ctx.moveTo(-20, 0);
  ctx.lineTo(80, 0);
  ctx.stroke();
  ctx.restore();

  // write Minutes
  ctx.save();
  ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec);
  ctx.lineWidth = 10;
  ctx.beginPath();
  ctx.moveTo(-28, 0);
  ctx.lineTo(112, 0);
  ctx.stroke();
  ctx.restore();
 
  // Write seconds
  ctx.save();
  ctx.rotate(sec * Math.PI / 30);
  ctx.strokeStyle = '#D40000';
  ctx.fillStyle = '#D40000';
  ctx.lineWidth = 6;
  ctx.beginPath();
  ctx.moveTo(-30, 0);
  ctx.lineTo(83, 0);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
  ctx.stroke();
  ctx.fillStyle = 'rgba(0, 0, 0, 0)';
  ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
  ctx.fill();
  ctx.restore();

  ctx.beginPath();
  ctx.lineWidth = 14;
  ctx.strokeStyle = '#325FA2';
  ctx.arc(0, 0, 142, 0, Math.PI * 2, true);
  ctx.stroke();

  ctx.restore();

  window.requestAnimationFrame(clock);
}

window.requestAnimationFrame(clock);

خروجی کد بالا بصورت زیر هست: همونطور که دیدید یک ساعت انیمیشنی با سه عقربه قرار داده شده و با توجه به زمان فعلی تغییر مکان میدن.

قرار دادن تصویر بصورت پانورما:

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

<canvas id="canvas" width="800" height="200"></canvas>

همونطور که میبینید، بدلیل اینکه میخوایم از سمت چپ به راست تصویر مورد نظر رو اسکرول کنیم، مقدار width رو بیشتر در نظر گرفتیم. کل کدهای Javascript بصورت زیر هستند:

var img = new Image();

img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
var CanvasXSize = 800;
var CanvasYSize = 200;
var speed = 30;
var scale = 1.05;
var y = -4.5;

var dx = 0.75;
var imgW;
var imgH;
var x = 0;
var clearX;
var clearY;
var ctx;

img.onload = function() {
    imgW = img.width * scale;
    imgH = img.height * scale;
    if (imgW > CanvasXSize) { x = CanvasXSize - imgW; }
    if (imgW > CanvasXSize) { clearX = imgW; }
    else { clearX = CanvasXSize; }
    if (imgH > CanvasYSize) { clearY = imgH; }
    else { clearY = CanvasYSize; }

    ctx = document.getElementById('canvas').getContext('2d');
    return setInterval(draw, speed);
}

function draw() {
    ctx.clearRect(0, 0, clearX, clearY);
    if (imgW <= CanvasXSize) {
        if (x > (CanvasXSize)) { x = 0; }
        if (x > (CanvasXSize - imgW)) { ctx.drawImage(img, x - CanvasXSize + 1, y, imgW, imgH); }
    }
    else {
        if (x > (CanvasXSize)) { x = CanvasXSize - imgW; }
        if (x > (CanvasXSize-imgW)) { ctx.drawImage(img, x - imgW + 1, y, imgW, imgH); }
    }
    ctx.drawImage(img, x, y,imgW, imgH);
    x += dx;
}

حالا کدهای بالا رو خط به خط توضیح میدیم و در انتها خروجی رو قرار میدیم. در خط 1 یک تصویر جدید رو با استفاده از سازنده Image، به وجود میاریم و درون متغیر img ذخیره میکنیم. در خط 3، آدرس تصویر پانورمای مورد نظر که در بالا هم به اون اشاره کردیم، قرار میدیم. در خط 4 و 5، طول افقی و عمودی Canvas مشخص شده که برابر با همون 800 و 200 هست. در خط 6 با استفاده از ویژگی speed میتونین سرعت اسکرول شدن تصویر رو کم و زیاد کنید. هر چه این عدد کمتر باشه، سرعت اسکرول شدن بیشتر خواهد بود. با استفاده از خط 7 و 8 هم میتونین بزرگنمایی و محل عمودی تصویر رو تنظیم کنید.

در خط 10 تا 16 یک سری متغیر رو تعریف و مقدار دهی کردیم. در خط 18 یک رویداد برای لود شدن تصویر پانورما قرار دادیم و هر زمان که تصویر مورد نظر بصورت کامل لود بشه، کدهای مورد نظر اجرا میشن. در این بلاک، عرض و ارتفاع تصویر با عرض و ارتفاع canvas مقایسه میشه. در انتها هم زمینه canvas گرفته میشه و با استفاده از setInterval، متد draw رو هر speed میلی ثانیه، اجرا میکینم.

در خط 31 تابع draw رو تعریف کردیم و وظیفه این تابع، مدیریت انیمیشن و قرار دادن فریم‌ها پشت سر هم هست. در ابتدا canvas رو با استفاده از متد clearRect، پاک میکنیم. در خط‌های بعدی هم با توجه به سایز و موقعیت افقی تصویر، اون رو در طول محور افقی جابجا میکنیم. در نهایت خروجی بصورت زیر خواهد شد:

به همین راحتی. انیمیشنها بهمین جا ختم نمیشن و میتونین انیمیشنهای پیشرفته‌تری رو به وجود بیارید.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

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

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !