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
<source lang="javascript">
<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">
Drag and drop me somewhere else
</body> </html></source>
Change color object to CSS
<source lang="javascript">
<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">
Drag and drop me somewhere else
</body> </html></source>
Color from Hex value
<source lang="javascript">
<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></source>
Color from hex value based on existing value
<source lang="javascript">
<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></source>
Convert dojo.Color object to CSS
<source lang="javascript">
<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></source>
Convert dojo.Color to hex value
<source lang="javascript">
<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></source>
Convert dojo.Color to RGB
<source lang="javascript">
<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></source>
Convert dojo.Color to RGBA
<source lang="javascript">
<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></source>
Create a gray color
<source lang="javascript">
<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></source>
Create color from your array
<source lang="javascript">
<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></source>
Create dojo.Color
<source lang="javascript">
<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></source>
Create dojo.Color from an Array based on existing color
<source lang="javascript">
<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+"
")
dojo.colorFromArray([200, 200, 200], c1);
document.write(c1)
</script>
</body>
</html></source>
Create dojo.Color from String
<source lang="javascript">
<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></source>
Set color to new value
<source lang="javascript">
<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></source>
