CANVAS實現調色板 之 我的第一個隨筆

主題代碼

 1 <canvas id="color"></canvas>
 2 
 3 
 4 <script>
 5 var color=document.getElementById("color");
 6 var context=color.getContext("2d");
 7 color.height=window.innerHeight;
 8 color.width=window.innerWidth;
 9 
10 change=function(r0,g0,b0,r1,g1,b1,start_x,end_x){
11 var r=r0,g=g0,b=b0;
12 var cut;//顏色差值
13 if(r0!=r1){
14 cut=r1-r0;
15 }
16 if(g0!=g1){
17 cut=g1-g0;
18 }
19 if(b0!=b1){
20 cut=b1-b0;
21 }
22 
23 //context.fillStyle="rgb("+r0+","+g0+","+b0+")";
24 //context.fillRect(start_x,300,10,100);
25 
26 var inc=cut/(end_x-start_x);//step
27 //console.log(inc);
28 for (var i = 0; i < end_x-start_x; i++){
29 if(r0!=r1){
30 r=r+inc;
31 }
32 if(g0!=g1){
33 g=g+inc;
34 }
35 if(b0!=b1){
36 b=b+inc;
37 }
38 
39 /*效果1*/
40 // context.fillStyle="rgb("+Math.floor(r)+","+Math.floor(g)+","+Math.floor(b)+")"; 
41 // context.fillRect(start_x+i,0,1,100);
42 
43 /*效果2*/
44 for (var j = 0; j < 100; j++){
45 // context.fillStyle="rgba("+Math.floor(r)+","+Math.floor(g)+","+Math.floor(b)+","+j/100*Math.random()+")";
46 context.fillStyle="rgba("+Math.floor(r)+","+Math.floor(g)+","+Math.floor(b)+","+j/800+")"; 
47 //console.log(j);
48 context.fillRect(start_x+i,j*color.height/100,1,(j+1)*color.height/100);
49 };
50 
51 //console.log(start_x+i,start_x+i+1);
52 };
53 //context.fillRect(end_x,200,10,100);
54 // console.log(r,g,b);
55 }
56 var w=Math.ceil(color.width/6);
57 
58 change(206,11,11,206,11,206,0,w);
59 change(206,11,206,11,11,206,w,2*w);
60 change(11,11,206,11,206,206,2*w,3*w);
61 change(11,206,206,11,206,11,3*w,4*w);
62 change(11,206,11,206,206,11,4*w,5*w);
63 change(206,206,11,206,11,11,5*w,6*w);
64 
65 
66 </script>

實現效果一

實現效果二