ایجاد پس زمینه ی Gradient به وسیله جاوااسکریپت
سلام به همه دوستان، آشنایان و نزدیکان:10:
توجه: تمامی مشکلات این اسکریپت برطرف شد، حالا می تونید ازش با خیال راحت استفاده کنید.
بی مقدمه می ریم سر اصل مطلب:
من دیروز یه تابع نوشتم برای اینکه یه پس زمینه ی گرادینت درست کنه، البته با جاوااسکریپت، خوبیش هم اینه که دیگه نیاز به ساختن عکس توسط نرم افزارهای گرافیکی رو نداره.
این تابع cross browser هست و با تمامی مرورگرهای معروف فعلی همخوانی داره.
تابعی رو که نوشتم کدش زیر هست:
کد:
/*
* Name : eGradient.js
* Desc : create gradient background with javascript, eGradient is cross browser
* Copyright (c) 2008 eAmin ( amin.987 [at] hotmail [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(startColorStr="+options.startPoint+",endColorStr="+options.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>[/HTML]
سوالی داشتید در خدمتم.
