CSS21-t100303-make-images.html (1607B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 <html lang="en-US"> 4 <head> 5 <title></title> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <meta http-equiv="Content-Script-Type" content="text/javascript"> 8 <script type="text/javascript"> 9 10 var gWidth = 1024; 11 var gHeight = 1; 12 var gBarriers = [ 170, 334, 340, 344, 350, 458 ]; 13 14 var gColors = [ "green", "red" ]; 15 16 function append_url(filename, contents_url) { 17 var p = document.createElement("p"); 18 var a = document.createElement("a"); 19 a.href = contents_url; 20 var t = document.createTextNode("CSS21-t100303-" + filename); 21 a.appendChild(t); 22 p.appendChild(a); 23 document.body.appendChild(p); 24 } 25 26 function run() { 27 var canvas = document.getElementById("canvas"); 28 var cx = canvas.getContext("2d"); 29 for (var i in gBarriers) { 30 var barrier = gBarriers[i]; 31 32 cx.fillStyle = gColors[1]; 33 cx.fillRect(0, 0, gWidth, gHeight); 34 cx.fillStyle = gColors[0]; 35 cx.fillRect(0, 0, barrier, gHeight); 36 append_url(gColors[0] + "-in-" + barrier + "px.png", 37 canvas.toDataURL("image/png")); 38 39 cx.fillStyle = gColors[0]; 40 cx.fillRect(0, 0, gWidth, gHeight); 41 cx.fillStyle = gColors[1]; 42 cx.fillRect(0, 0, barrier, gHeight); 43 append_url(gColors[0] + "-outside-" + barrier + "px.png", 44 canvas.toDataURL("image/png")); 45 } 46 } 47 48 </script> 49 </head> 50 <body onload="run()"> 51 52 <canvas width="1024" height="1" id="canvas"></canvas> 53 54 </body> 55 </html>