JavaScript Tutorial/Dojo toolkit/Color
Содержание
- 1 Blend colors
- 2 Change color object to CSS
- 3 Color from Hex value
- 4 Color from hex value based on existing value
- 5 Convert dojo.Color object to CSS
- 6 Convert dojo.Color to hex value
- 7 Convert dojo.Color to RGB
- 8 Convert dojo.Color to RGBA
- 9 Create a gray color
- 10 Create color from your array
- 11 Create dojo.Color
- 12 Create dojo.Color from an Array based on existing color
- 13 Create dojo.Color from String
- 14 Set color to new value
Blend colors
<html>
<head>
<link rel="StyleSheet" type="text/css"
href="js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.addOnLoad(function( ) {
var blue = new dojo.Color("#00f");
var red = new dojo.Color([255, 0, 0]);
var purple = dojo.blendColors(blue, red, 0.5);
dojo.style("my", "background", purple.toCss( ));
});
</script>
</head>
<body class="tundra">
<p style="position : absolute; left : 300px; top : 300px;"
id="my"
>Drag and drop me somewhere else</p>
</body>
</html>
Change color object to CSS
<html>
<head>
<link rel="StyleSheet" type="text/css"
href="js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.addOnLoad(function( ) {
var blue = new dojo.Color("#00f");
var red = new dojo.Color([255, 0, 0]);
var purple = dojo.blendColors(blue, red, 0.5);
dojo.style("my", "background", purple.toCss( ));
});
</script>
</head>
<body class="tundra">
<p style="position : absolute; left : 300px; top : 300px;"
id="my"
>Drag and drop me somewhere else</p>
</body>
</html>
Color from Hex value
<html>
<head>
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/"
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
var c1 = dojo.colorFromHex("#00ff00");
alert(c1);
</script>
</head>
<body></body>
</html>
Color from hex value based on existing value
<html>
<head>
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/"
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
var c1 = new dojo.Color([255, 0, 0]);
alert(c1);
dojo.colorFromHex("#0000ff", c1);
alert(c1);
</script>
</head>
<body></body>
</html>
Convert dojo.Color object to CSS
<html>
<head>
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/"
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
var c = new dojo.Color("red");
document.write(c.toCss());
</script>
</body>
</html>
Convert dojo.Color to hex value
<html>
<head>
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/"
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
var c = new dojo.Color("red");
document.write(c.toHex());
</script>
</body>
</html>
Convert dojo.Color to RGB
<html>
<head>
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/"
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
var c = new dojo.Color("red");
document.write(c.toRgb());
</script>
</body>
</html>
Convert dojo.Color to RGBA
<html>
<head>
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/"
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
var c = new dojo.Color("red");
document.write(c.toRgba());
</script>
</body>
</html>
Create a gray color
<html>
<head>
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/"
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.colors");
document.write(dojo.colors.makeGrey(100));
</script>
</body>
</html>
Create color from your array
<html>
<head>
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/"
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
</head>
<body>
<script>
var c1 = dojo.colorFromArray([150, 150, 150]);
document.write(c1)
</script>
</body>
</html>
Create dojo.Color
<html>
<head>
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/"
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
var c1 = new dojo.Color([255, 0, 0]);
alert(c1);
</script>
</head>
<body></body>
</html>
Create dojo.Color from an Array based on existing color
<html>
<head>
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/"
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
</head>
<body>
<script>
var c1 = dojo.colorFromArray([150, 150, 150]);
document.write(c1+"<BR>")
dojo.colorFromArray([200, 200, 200], c1);
document.write(c1)
</script>
</body>
</html>
Create dojo.Color from String
<html>
<head>
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/"
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
var c = new dojo.Color("red");
alert(c.toHex());
c.setColor([0,255,0]);
alert(c.toHex());
</script>
</body>
</html>
Set color to new value
<html>
<head>
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/"
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
var c = new dojo.Color("red");
alert(c.toHex());
c.setColor([0,255,0]);
alert(c.toHex());
</script>
</body>
</html>