| <html> |
| <body> |
| |
| <canvas id="canvas" width="8" height="8"></canvas> |
| <canvas id="canvas2" width="216" height="216"></canvas> |
| |
| <script type="text/javascript"> |
| |
| var temp = document.createElement("canvas"); |
| |
| var canvas = document.getElementById("canvas"); |
| var canvas2 = document.getElementById("canvas2"); |
| |
| var temp_ctx = temp.getContext("2d"); |
| var ctx = canvas.getContext("2d"); |
| var ctx2 = canvas2.getContext("2d"); |
| |
| var style = [ |
| "#000000", "#000080", "#0000FF", |
| "#008000", "#008080", "#0080FF", |
| "#00FF00", "#00FF80", "#00FFFF", |
| "#800000", "#800080", "#8000FF", |
| "#808000", "#808080", "#8080FF", |
| "#80FF00", "#80FF80", "#80FFFF", |
| "#FF0000", "#FF0080", "#FF00FF", |
| "#FF8000", "#FF8080", "#FF80FF", |
| "#FFFF00", "#FFFF80", "#FFFFFF" |
| ]; |
| |
| ctx.beginPath(); |
| ctx.arc(4, 4, 4, 0, 6.28, false); |
| ctx.closePath(); |
| ctx.fillStyle = "#ABCDEF"; |
| ctx.fill(); |
| |
| for (var j=0; j<27; j++) { |
| for (var i=0; i<27; i++) { |
| |
| ctx.beginPath(); |
| ctx.rect(0, 0, 8, 8); |
| ctx.closePath(); |
| ctx.globalCompositeOperation = "source-in"; |
| ctx.fillStyle = style[i]; |
| ctx.fill(); |
| |
| var data = ctx.getImageData(0, 0, 8, 8); |
| temp.width = temp.height = 8; |
| temp_ctx.putImageData(data, 0, 0); |
| |
| ctx2.drawImage(temp, 0, 0, 8, 8, 8*i, 8*j, 8, 8); |
| |
| } |
| } |
| |
| </script> |
| |
| </body> |
| </html> |
