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>
实现效果一
实现效果二
上一篇: 从css 3d说到空间坐标轴
下一篇: vue实现分页