| <!DOCTYPE html> |
| <html> |
| <body> |
| <canvas id='drawCanvas' width='200' height='200' > |
| <script> |
| var drawCanvas; |
| var drawCtx; |
| var testCanvas; |
| var testCtx; |
| var rotateNum = 0; |
| |
| function draw() { |
| drawCtx.clearRect(0, 0, drawCanvas.width, drawCanvas.height); |
| for (var i = 0; i < 4; i++) { |
| for (var j = 0; j < 4; j++) { |
| drawCtx.fillStyle = 'rgb(' + (255 - 40 * i - 2 * rotateNum) + ',' + (255 - 50 * j) |
| + ',' + (255 - 12 * rotateNum)+ ')'; |
| drawCtx.fillRect(j * 50, i * 50, 50, 50); |
| rotateNum = (rotateNum + 1) % 20; |
| } |
| } |
| requestAnimationFrame(draw); |
| } |
| |
| function changeTestCanvas() { |
| testCtx.clearRect(0, 0, testCanvas.width, testCanvas.height); |
| testCtx.fillStyle = 'rgb(' + (255 - 12 * rotateNum) + ',' + (255 - 12 * rotateNum) |
| + ',' + (255 - 12 * rotateNum) + ')'; |
| testCtx.fillRect(0, 0, 4000, 4000); |
| } |
| |
| function runTest() { |
| changeTestCanvas(); |
| testCanvas.toBlob(function(blob) { |
| runTest(); |
| }); |
| } |
| |
| window.onload = function () { |
| drawCanvas = document.getElementById("drawCanvas"); |
| drawCtx = drawCanvas.getContext("2d"); |
| testCanvas = document.createElement("canvas"); |
| testCanvas.width = 4000; |
| testCanvas.height = 4000; |
| testCtx = testCanvas.getContext("2d"); |
| |
| draw(); |
| runTest(); |
| }; |
| </script> |
| </body> |
| </html> |
| |
