CANVAS实现调色板 之 我的第一个随笔

主题代码

<canvas id="color"></canvas>


<script>
var color=document.getElementById("color");
var context=color.getContext("2d");
color.height=window.innerHeight;
color.width=window.innerWidth;

change=function(r0,g0,b0,r1,g1,b1,start_x,end_x){
var r=r0,g=g0,b=b0;
var cut;//颜色差值
if(r0!=r1){
cut=r1-r0;
}
if(g0!=g1){
cut=g1-g0;
}
if(b0!=b1){
cut=b1-b0;
}

//context.fillStyle="rgb("+r0+","+g0+","+b0+")";
//context.fillRect(start_x,300,10,100);

var inc=cut/(end_x-start_x);//step
//console.log(inc);
for (var i = 0; i < end_x-start_x; i++){
if(r0!=r1){
r=r+inc;
}
if(g0!=g1){
g=g+inc;
}
if(b0!=b1){
b=b+inc;
}

/*效果1*/
// context.fillStyle="rgb("+Math.floor(r)+","+Math.floor(g)+","+Math.floor(b)+")"; 
// context.fillRect(start_x+i,0,1,100);

/*效果2*/
for (var j = 0; j < 100; j++){
// context.fillStyle="rgba("+Math.floor(r)+","+Math.floor(g)+","+Math.floor(b)+","+j/100*Math.random()+")";
context.fillStyle="rgba("+Math.floor(r)+","+Math.floor(g)+","+Math.floor(b)+","+j/800+")"; 
//console.log(j);
context.fillRect(start_x+i,j*color.height/100,1,(j+1)*color.height/100);
};

//console.log(start_x+i,start_x+i+1);
};
//context.fillRect(end_x,200,10,100);
// console.log(r,g,b);
}
var w=Math.ceil(color.width/6);

change(206,11,11,206,11,206,0,w);
change(206,11,206,11,11,206,w,2*w);
change(11,11,206,11,206,206,2*w,3*w);
change(11,206,206,11,206,11,3*w,4*w);
change(11,206,11,206,206,11,4*w,5*w);
change(206,206,11,206,11,11,5*w,6*w);


</script>

实现效果一

 

实现效果二