آشنایی با تگ Canvas در HTML5

یکی از مشکلات طراحان وب , تغییر اندازه تصاویر در سمت کاربر میباشد, چرا که تغیر اندازه تصویر اغلب در سمت سرور انجام می پذیرد , در این مقاله نحوه تغییر اندازه تصویر را با ذکر مثال شرح خواهم داد .

برای درک بیشتر تابع تغییر اندازه تصویر با استفاده از Canvas ابتدا توضیح مختصری خواهیم داشت .

برای ترسیم Canvas متد () drawImaged که به تصویر مورد نظر اشاره (description point) می کند .به این معنی میباشد که سمت بالا و سمت چپ از تصویر مربوطه اشاره میکند که آماده ترسیم میباشد .

انواع مختلف متد شامل موارد زیر میباشد :

- drawImage شامل پارامترهای (image,dx,dy)

- drawimage شامل پارامترهای (image,dx,dy,dw,dh)

-drawimage شامل پارامترهای (image,sx,sy,sw,sh,dx,dy,dw,dh)

پارامترهای "dx" و "dy" به عنوان "destinationx" و "destinationy" شناخته میشود .که در واقع همان محور y و محور x میباشد .

پارامترهای "dw" و "dh" به عنوان "destinationWidth" و "destinationHeight" معرفی میشوند که در واقع همان طول و عرض تصویر را مشخص می کند .

پارامترهای "sx" و "sy" به عنوان "SourceX" و "SourceY" که برای کپی برداری از تصویز اصلی در محور x و y ارث بری میشوند .

پارامترهای "sw" و "sh" به عنوان "SourceWidth" و "SourceHeight" معرفی میشود که طول و عرض تصویر اصلی را یرای کپی برداری مشخص میکند .

همانطور که میدانید متد ()DrawImage یک متغیر نیاز دارد .پس در ابتدا ما باید یک متغیر از تصویر ایجاد کنیم و سپس مقادیر آن را بارگزاری کنیم .تابع ()window.onload برای این عمل استفاده میشود که قبل از متد ()drawImage استفاده میشود .

<html>  
    <body>  
        <p>Image being used:</p>  
        <img id="skullash" width="250" height="210"    
src="C:\Users\dddd\Desktop\cigarette-smoke-skull.jpg" alt="The Skull Ash">  
        <p>Canvas Image:</p>  
        <canvas id="smokeCanvas" width="325" height="225"    
style="border:3px solid red;">  
        < script > window.onload = function ashSkull() {  
            var newCanvas = document.getElementById("smokeCanvas");  
            var context = newCanvas.getContext("2d");  
            var image = document.getElementById("skullash");  
            context.drawImage(image, 0, 0);  
            }   
        </script>  
        </canvas>  
    </body>  
</html>