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>

实现效果一

实现效果二