欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-14 18:17:53
主题代码 实现效果一 实现效果二 ......

主题代码

 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>

 

 

 

 

实现效果一

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

 

实现效果二

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