[js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API - ghostwu(3)_H5之家

1 <style> 2 body { 3 background:#000; 4 } 5 #canvas { 6 background:white; 7 } 8 </style> 9 <script> 10 window.onload = function(){ 11 var oCanvas = document.querySelector( "#canvas" ), 12 oGc = oCanvas.getContext( '2d' ), 13 aColor = [ '00', '33', '66', '99', 'cc', 'ff' ], 14 aMiddle = [ 'ff', 'cc', '99', '66', '33', '00' ], count = 0; 15 for( var i = 0; i < 12; i++ ){ 16 for( var j = 0; j < 18; j++ ){ 17 count++; 18 if ( i < 6 && count < 6 && j < 6 ) 19 oGc.fillStyle = `#${aColor[i]}${aMiddle[0]}${aColor[j]}`; ( i < 6 && count < 12 && j < 12 ) 21 oGc.fillStyle = `#${aColor[i]}${aMiddle[1]}${aColor[j-6]}`; ( i < 6 && count < 18 && j < 18 ) 23 oGc.fillStyle = `#${aColor[i]}${aMiddle[2]}${aColor[j-12]}`; ( count < 6 && j < 6 ) 25 oGc.fillStyle = `#${aColor[i-6]}${aMiddle[3]}${aColor[j]}`; ( count < 12 && j < 12 ) 27 oGc.fillStyle = `#${aColor[i-6]}${aMiddle[4]}${aColor[j-6]}`; ( count < 18 && j < 18 ) 29 oGc.fillStyle = `#${aColor[i-6]}${aMiddle[5]}${aColor[j-12]}`; 30 oGc.fillRect( j * 40, i * 40, 40, 40 ); 31 } 32 count = 0; 33 } 34 } 35 </script> 36 </head> 37 <body> 38 <canvas></canvas> 39 </body>

javascript原生实现调色板：

1 var aColor = [ '00', '33', '66', '99', 'cc', 'ff' ], 2 aMiddle = [ 'ff', 'cc', '99', '66', '33','00' ]; 3 4 document.write( "<table>" ); 5 for( var i = 0; i < 12; i++ ){ 6 document.write( "<tr>" ); 7 for( var j = 0 ; j < 18; j++ ) { document.write( "<td> </td>" ); ( i < 6 && j < 12 ){ document.write( "<td> </td>" ); document.write( "<td> </td>" ); document.write( "<td> </td>" ); document.write( "<td> </td>" ); document.write( "<td> </td>" ); 20 } 21 } 22 document.write( "</tr>" ); 23 } 24 document.write( "</table>" );