ایجاد پس زمینه ی Gradient به وسیله جاوااسکریپت
سلام.
من دیروز یه تابع نوشتم برای اینکه یه پس زمینه ی گرادینت درست کنه، البته با جاوااسکریپت، خوبیش هم اینه که دیگه نیاز به ساختن عکس توسط نرم افزارهای گرافیکی رو نداره.
این تابع cross browser هست و با تمامی مرورگرهای معروف فعلی همخوانی داره.
تابعی رو که نوشتم کدش زیر هست:
/*
* Name : eGradient.js
* Desc : create gradient background with javascript, eGradient is cross browser
* Copyright (c) 2008 eAmin ( eAmin.js [at] gmail [dot] com )
* Build Date : 10/25/2008
*/
function eGradient(elm) {
var options = {
startPoint:'',
endPoint :''
};
var elm = document.getElementById(elm);
for (var i in options) {
if (!options[i]) {
options[i] = arguments[1][i];
}
}
if (!!window.ActiveXObject) {
elm.style.filter = "progid:DXImageTransform.Microsoft.Gradient(startC olorStr="+options.startPoint+",endColorStr="+optio ns.endPoint+",gradientType=0)";
} else {
var canvas = document.createElement("canvas"), ctx = canvas.getContext("2d");
canvas.style.width = parseInt(elm.style["width"]);
canvas.style.height = parseInt(elm.style["height"]);
elm.appendChild(canvas);
var linergradient = ctx.createLinearGradient(0, 0, 0, parseInt(canvas.height));
linergradient.addColorStop(0, options.startPoint);
linergradient.addColorStop(1, options.endPoint);
ctx.fillStyle = linergradient;
ctx.fillRect(0, 0, parseInt(canvas.width), parseInt(canvas.height));
}
}
یه توضیح هم در رابطه با طرز استفاده از این تابع:
آرگومان elm: این آرگومان وظیفه داره تا اون المنتی که شما قصد ایجاد پس زمینه ی گرادینت رو دارید، id المنت مربوطه رو بگیره.
آبجکتهای startPoint و endPoint:
startPoint: رنگ شروع کننده.
endPoint: رنگ پایان دهنده.
اینم یه Sample:
کد HTML:
<html>
<head>
<script type="text/javascript" src="gradient.js"></script>
<script type="text/javascript">
window.onload = function() {
eGradient('egrad', {
startPoint: '#ffffff',
endPoint: '#000000'
});
};
</script>
</head>
<body>
<div id="egrad" style="width:100px; height: 100px;"></div>
</body>
</html>
سوالی داشتید در خدمتم.
نقل قول: ایجاد پس زمینه ی Gradient به وسیله جاوااسکریپت
سلام.
دوستان اسکریپت قبلی مشکلاتی داشت، مثل: وقتی سایز بکگراند رو بزرگ می کردین رنگ بکگراند خیلی کمرنگ می شد.
حالا اونها رو برطرف کردم، و می تونید با خیال راحت از این تابع استفاده کنید.
نقل قول: ایجاد پس زمینه ی Gradient به وسیله جاوااسکریپت
آقا میشه توضیح بدی مراحل نوشتنش رو؟
من از خیلی چیزاش سر در نمیارم.
نقل قول: ایجاد پس زمینه ی Gradient به وسیله جاوااسکریپت
