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

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

فهرست محتوای این مقاله

    html-canvas

    در جلسه گذشته در مورد روشهای قرار دادن تصاویر درون canvas صحبت کردیم و در این جلسه میخوایم روشهای دیگه رو بهتون توضیح بدیم.

    استفاده از یک canvas درون Canvas دیگر:

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

    <canvas id="canvas" width="250" height="250" style="border: 1px solid #000;">
    	Your browser does not support html canvas. Please update your browser and try again.
    </canvas>
    
    <canvas id="canvas2" width="250" height="250" style="border: 1px solid #000;">
    	Your browser does not support html canvas. Please update your browser and try again.
    </canvas>

    میبینید که id دو Canvas بالا با هم فرق داره. ما میخوایم به عنوان مثال یک pattern رو درون canvas2 رسم کنیم و بعد از اون canvas2 رو با استفاده از متد drawImage درون canvas رسم میکنیم. خب مرحله اول اینه که یک الگو رو درون canvas2 قرار بدیم. همونطور که در جلسات قبل یاد گرفتیم با استفاده از متد createPattern میتونیم یک الگو رو با استفاده از تصویر مورد نظرمون به وجود بیاریم. پس بصورت زیر عمل میکنیم:

    var canvas2 = document.getElementById('canvas2');
    var ctx2 = canvas2.getContext('2d');
     
    var img = new Image();
    img.src = 'pattern.png';
    img.onload = function() {
    	var pattern = ctx2.createPattern(img, 'repeat');
    	ctx2.fillStyle = pattern;
    	ctx2.fillRect(10, 10, 150, 150);
    }

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

    المنت سمت راست همون canvas2 هست. حالا میخوایم canvas2 رو درون canvas یا المنت سمت چپ رسم کنیم. برای اینکار بصورت زیر عمل میکنیم:

    var canvas2 = document.getElementById('canvas2');
    var ctx2 = canvas2.getContext('2d');
     
    var img = new Image();
    img.src = 'pattern.png';
    img.onload = function() {
    	var pattern = ctx2.createPattern(img, 'repeat');
    	ctx2.fillStyle = pattern;
    	ctx2.fillRect(10, 10, 150, 150);
    
    	ctx.drawImage(canvas2 , 10, 10);
    }
    
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    دیدید که درون همون متد load مربوط به تصویر، بعد از اینکه الگو رو تعریف کردیم و مستطیل رو درون canvas2 رسم کردیم، با استفاده از متد drawImage، محتویات canvas2 رو درون canvas رسم کردیم. برای اینکار بعنوان ورودی اول، همون canvas2 رو قرار دادیم. با اینکار خروجی بصورت زیر میشه:html5 canvas 47

    بهمین راحتی.

    استفاده از فریمهای یک ویدیو:

    علاوه بر روشهای قبل، میتونین از فریم های یک ویدیو بعنوان ورودی canvas استفاده کنید و اون فریم رو بر روی canvas رسم کنید. ما در ابتدا یک video رو قرار میدیم:

    <video id="video" width="320" height="240" controls>
    	<source src="movie.mp4" type="video/mp4">
    	Your browser does not support the video tag.
    </video>

    بعد از اون کدهای زیر رو در Javascript قرار میدیم:

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var video  = document.getElementById('video');
    
    video.addEventListener('play', function () {
        var $this = this; //cache
        (function loop() {
            if (!$this.paused && !$this.ended) {
                ctx.drawImage($this, 0, 0);
                setTimeout(loop, 1000 / 30); // drawing at 30fps
            }
        })();
    }, 0);

    همونطور که دیدید در ابتدا video رو درون متغیر مورد نظر ذخیره کردیم. بعد از اون برای رویداد play ویدیو یک callback قرار دادیم و زمانی که بر روی دکمه play کلیک بشه، این تابع اجرا میشه. زمانی که ویدیو play میشه، هر فریم اون بصورت 30 فریم بر ثانیه درون canvas نمایش داده میشه. خروجی بصورت زیر میشه:html5 canvas 48

    به همین راحتی. برای مطالعه بیشتر در مورد استفاده از ویدیو در Canvas میتونین این لینک رو مشاهده کنید.

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

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

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

    موفق باشید

    یا علی

    Source

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

    جلسات دوره

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

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

    نیاز به لاگین

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