Commits

Anonymous committed f79ff82

Demo of using OpenClipart's JSON API through jsonp.jit.su proxy.

  • Participants
  • Parent commits f0e3fe2

Comments (0)

Files changed (1)

javascript/jsonp-clipart.html

+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8">
+  <title>OpenClipart through JSONP proxy demo</title>
+  <style>
+#canvas { border: 1px solid blue; }
+#status { background: #000060; color: white }
+  </style>
+</head>
+<body>
+
+<h1>OpenClipart through JSONP proxy demo</h1>
+
+<p id="status"></p>
+
+<canvas id="canvas" width="600" height="400">
+Your browser doesn't support displaying an HTML5 canvas.
+</canvas>
+
+</body>
+<script type="text/javascript">
+
+/* The Elements */
+var status = document.getElementById('status');
+var canvas = document.getElementById('canvas');
+
+/* The Image */
+var img = new Image();
+var drawOK = false;
+img.onload = function() {
+    drawOK = true;
+};
+
+/* The Renderer */
+tick = 0;
+var draw = function() {
+    var ctx = canvas.getContext('2d');
+    ctx.fillStyle = 'rgb(100,' + (tick % 256) + ',70)';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    if (drawOK) {
+        var x = Math.floor(((Math.cos(tick / 100) + 1) / 2) * (canvas.width - img.width));
+        var y = Math.floor(((Math.sin(tick / 100) + 1) / 2) * (canvas.height - img.height));
+        ctx.drawImage(img, x, y);
+    }
+    tick += 1;
+};
+
+/* The JSONP */
+var glue = function(data) {
+    img.src = data.payload[0].svg.png_thumb;
+    status.innerHTML = data.payload[0].svg.png_thumb;
+};
+
+query = 'tofu';
+
+script = document.createElement('script');
+script.type = 'text/javascript';
+script.src = 'http://jsonp.jit.su/?callback=glue&url=' + 
+             'http://openclipart.org/search/json/?query=' + query + '&page=1&amount=1';
+document.getElementsByTagName("head")[0].appendChild(script);
+
+/* The Animator */
+var animFrame = function(time) {
+    draw();
+    request = requestAnimationFrame(animFrame);
+};
+request = requestAnimationFrame(animFrame);
+
+</script>