도트찍어 색상만들고있습니다.
문제는 알고리즘을 잘모르겟습니다
여기까진 했는데요..
레드->마젠타->블루~~~~~이쪽으로갈때 그라데이션을 주고싶은데
어떻게하나요??? Ydeep이란 변수를사용해서 깍을려고했는데 잘안되네요..4시간째..
for문에서 일단 y축으로 컬러를 그린뒤 x축한칸이동해서 y축방향으로 계속 찍습니다.
x축 한칸이동뒤 깍아야하는데 잘모르겠네요 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
아래소스를 메모장 html로 저장하면됩니다.
<html>
<body>
< type="text/">
//환경변수설정
var config = {
//----------------------------------상단부분
MenuHeight : "25px",
MenuBackground : "#222222",
MenuBorder : "1px; solid #dddddd",
//----------------------------------중단부분 스크린(도트를찍을부분)
ScreenWidth : 180,
ScreenHeight : 120,
ScreenBackground : "#000000",
//----------------------------------하단부분(선택된 색상정보 저장)
SelectedColorHeight : "25px",
SelectedColorBackground : "#eeeeee",
SelectedColorBorder : "1px; solid #dddddd"
//----------------------------------
}
function ColorPicker(id){
this.cfg = config;
this.Screen = document.getElementById(id);
this._Menu = document.createElement("div");
this._SelectedColor = document.createElement("div");
}
ColorPicker.prototype.init = function(){
this.Screen.style.width = this.cfg.ScreenWidth + "px";
this.Screen.style.height = this.cfg.ScreenHeight + "px";
this.Screen.style.background = this.cfg.ScreenBackground;
var parent = this.Screen.parentNode;
this._Menu.style.width = this.cfg.ScreenWidth + "px";
this._Menu.style.height = this.cfg.MenuHeight;
this._Menu.style.background = this.cfg.MenuBackground;
this._Menu.style.border = this.cfg.MenuBorder;
parent.insertBefore(this._Menu, this.Screen);
this._SelectedColor.style.width = this.cfg.ScreenWidth + "px";
this._SelectedColor.style.height = this.cfg.SelectedColorHeight;
this._SelectedColor.style.background = this.cfg.SelectedColorBackground;
this._SelectedColor.style.border = this.cfg.SelectedColorBorder;
//this._SelectedColor.style.position = "absolute";
//this._SelectedColor.style.display = "none";
if(parent.lastChild == this.Screen){
parent.appendChild(this._SelectedColor);
}
else{
parent.insertBefore(this._SelectedColor, this.Screen.nextSibling);
}
this.setColor();
}
//전역변수,기능 설정
var cmd = {
html : "",
absoluteR : 255,
absoluteG : 255,
absoluteB : 255,
excuteR : 255,
excuteG : 255,
excuteB : 255,
Xdeep : 255/(config.ScreenWidth/6/2), //총컬러갯수/(스크린너비/컬러갯수6/도트사이즈2)
Ydeep : 255/(config.ScreenHeight/2/2), //총컬러갯수/(스크린높이/화이트/블랙2/도트사이즈2)
Xdot : 0,
Ydot : 0,
DotColor : "",
Hue : "red",
Light : "white"
}
ColorPicker.prototype.setColor = function(){
//-----------------------------------
for(var x = 0; x<config.ScreenWidth; x++){
//-----------------------------------
for(var y=0; y<config.ScreenHeight; y++){
cmd.DotColor = "RGB(" + cmd.excuteR + "," +
cmd.excuteG + "," +
cmd.excuteB + ")";
this.mkDot(cmd.DotColor, cmd.Xdot, cmd.Ydot);
if(cmd.Hue == "red"){
if (cmd.Light=="white"){
cmd.excuteG -= cmd.Ydeep;
cmd.excuteB-=cmd.Ydeep;
}
else if (cmd.Light=="black"){
cmd.excuteR-=cmd.Ydeep;
}
if(cmd.excuteG<=0){cmd.excuteG=0;cmd.excuteC=0;cmd.Light="black"}
}
else if(cmd.Hue =="magenta"){
if (cmd.Light=="white"){
cmd.excuteG-=cmd.Ydeep;
}
else if (cmd.Light=="black"){
cmd.excuteR-=cmd.Ydeep;
cmd.excuteB-=cmd.Ydeep;
}
if(cmd.excuteG<=0){cmd.excuteG=0;cmd.Light="black"}
}
else if(cmd.Hue =="blue"){
if (cmd.Light=="white"){
cmd.excuteR-=cmd.Ydeep;
cmd.excuteG-=cmd.Ydeep;
}
else if (cmd.Light=="black"){
cmd.excuteB-=cmd.Ydeep;
}
if(cmd.excuteR<=0){cmd.excuteR=0;cmd.excuteG=0;cmd.Light="black"}
}
else if(cmd.Hue =="cyan"){
if (cmd.Light=="white"){
cmd.excuteR-=cmd.Ydeep;
}
else if (cmd.Light=="black"){
cmd.excuteG-=cmd.Ydeep;
cmd.excuteB-=cmd.Ydeep;
}
if(cmd.excuteR<=0){cmd.excuteR=0;cmd.Light="black"}
}
else if(cmd.Hue =="green"){
if (cmd.Light=="white"){
cmd.excuteR-=cmd.Ydeep;
cmd.excuteB-=cmd.Ydeep;
}
else if (cmd.Light=="black"){
cmd.excuteG-=cmd.Ydeep;
}
if(cmd.excuteB<=0){cmd.excuteB=0;cmd.Light="black"}
}
else if(cmd.Hue =="yellow"){
if (cmd.Light=="white"){
cmd.excuteB-=cmd.Ydeep;
}
else if (cmd.Light=="black"){
cmd.excuteR-=cmd.Ydeep;
cmd.excuteG-=cmd.Ydeep;
}
if(cmd.excuteB<=0){cmd.excuteB=0;cmd.Light="black"}
}
cmd.Ydot+=2;
}
//-----------------------------------
cmd.excuteR=cmd.excuteG=cmd.excuteB=255;
cmd.Light="white";
cmd.Ydot = 0 ;
cmd.Xdot+=2;
if(cmd.Hue == "red"){
if(x>config.ScreenWidth/6*1/2){
cmd.Hue ="magenta";
}
}
else if(cmd.Hue == "magenta"){
if(x>config.ScreenWidth/6*2/2){
cmd.Hue ="blue";
}
}
else if(cmd.Hue == "blue"){
if(x>config.ScreenWidth/6*3/2){
cmd.Hue ="cyan";
}
}
else if(cmd.Hue == "cyan"){
if(x>config.ScreenWidth/6*4/2){
cmd.Hue ="green";
}
}
else if(cmd.Hue == "green"){
if(x>config.ScreenWidth/6*5/2){
cmd.Hue ="yellow";
}
}
}
//-----------------------------------
document.write(cmd.html);
}
ColorPicker.prototype.mkDot = function(color, posX, posY){
posX = parseInt(posX, 10);
posY = parseInt(posY, 10);
if(posX < 0)
{
return;
}
if(posY < 0)
{
return;
}
posX = this.Screen.offsetLeft + posX;
posY = this.Screen.offsetTop + posY;
if(posX >= this.Screen.offsetLeft + this.Screen.offsetWidth)
{
return;
}
if(posY >= this.Screen.offsetTop + this.Screen.offsetHeight)
{
return;
}
cmd.html+="<div style="+
"'border :1px;;"+
"position : absolute; " +
"width : 2px; " +
"height : 1px; " +
"font-size:0px;" +
"top:" + posY + "px; " +
"left:" + posX + "px; " +
"background : " + color + "; " +
"cursor : pointer; " +
"cursor : hand;'" +
"></div>"
}
</>
<div name = 'content1' id = 'content1'></div>
< type="text/">
var cp1 = new ColorPicker("content1");
cp1.init();
</>
</body>
</html>
y축 그리고 x축 한칸이동할때 컬러값들을 255로 초기화해주는데 그것땜시 그런거같아요..ㅠㅠㅠ 답은안바라니 팁좀 가르쳐 주시면 정말 고맙겠습니다.