Permalink
Browse files

DKS - added new "tests" subdirectory, containing both new automated u…

…nit tests, and earlier "by-hand" unit tests.
  • Loading branch information...
1 parent c18d912 commit c9a6d04de7cca4eb50ed650cef6c70a782962734 @dksmiffs dksmiffs committed Nov 6, 2012
View
@@ -0,0 +1 @@
+Options +Indexes
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jCanvas trivial addLayer, drawRect demo</title>
+ <style>
+ html, body { width:100%; height:100%; margin: 0px;}
+ canvas { display:block; }
+ </style>
+</head>
+<body>
+ <div id="content">
+ <canvas id="bg"></canvas>
+ </div>
+ <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
+ <script src="../../jcanvas.min.js"></script>
+ <script>
+ $(document).ready(function() {
+ $("#bg").addLayer({method: "drawRect", fillStyle: "green",
+ x: 10, y: 10, width: 40, height: 95, fromCenter: false})
+ .drawLayers();
+ });
+ </script>
+</body>
+</html>
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>animate jCanvas recursively</title>
+</head>
+<body>
+ <div id="content">
+ <canvas width="300" height="300"></canvas>
+ </div>
+ <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
+ <script src="../../jcanvas.min.js"></script>
+ <script>
+ function addBreadcrumbCount(ii, xx, yy, opacityValue) {
+ $("canvas").addLayer({name: "crumb-count-" + ii,
+ method: "drawText", fillStyle: "red", strokeStyle: "red",
+ x: xx, y: yy, font: "16pt Verdana",
+ fromCenter: false, text: String(ii+1), opacity: opacityValue});
+ }
+ function fadeLayer(name, opacity, speed /* , afterFn */ ) {
+ if (3 == arguments.length) {
+ $("canvas").animateLayer(name, {opacity: opacity}, speed);
+ } else if (4 == arguments.length) {
+ $("canvas").animateLayer(name, {opacity: opacity}, speed,
+ arguments[3]);
+ }
+ }
+ function raindrop(ii, width, height) {
+ if (ii<10) {
+ xx = Math.random() * width;
+ yy = Math.random() * height;
+ $("canvas").addLayer({name: "ring-" + ii,
+ method: "drawArc", strokeStyle: "blue",
+ strokeWidth: 2, x: xx, y: yy, radius: 10, opacity: 0});
+ addBreadcrumbCount(ii, xx, yy, 0);
+ fadeLayer("ring-"+ii, 1, 0);
+ $("canvas").animateLayer("ring-" + ii,
+ {radius: 30, opacity: 0}, 500,
+ function () {
+ fadeLayer("crumb-count-"+ii, 1, 0,
+ raindrop(++ii, width, height)
+ );
+ }
+ );
+ }
+ }
+ $(document).ready(function(){
+ var height = 300;
+ var width = 300;
+ raindrop(0, width, height);
+ });
+ </script>
+</body>
+</html>
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>animate jCanvas</title>
+</head>
+<body>
+ <div id="content">
+ <canvas width="1000" height="1000"></canvas>
+ </div>
+ <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
+ <script src="../../jcanvas.min.js"></script>
+ <script>
+ $(document).ready(function() {
+ $("canvas").addLayer({
+ method: "drawLine", name: "vertical-beam", strokeStyle: "#f00",
+ strokeWidth: 4, x1: 40, y1: 40, x2: 40, y2: 900, opacity: 0
+ })
+ .animateLayer("vertical-beam", {x1: 500, x2: 500, opacity: 1}, 500);
+ });
+ </script>
+</body>
+</html>
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jCanvas bare gradient</title>
+ <style>
+ html, body { width:100%; height:100%; margin: 0px;}
+ canvas { display:block; }
+ </style>
+</head>
+<body>
+ <div id="content">
+ <canvas id="bg"></canvas>
+ </div>
+ <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
+ <script src="../../jcanvas.min.js"></script>
+ <script>
+ $(document).ready(function(){
+ var myBg = document.getElementById("bg");
+ var ctx = myBg.getContext('2d');
+ ctx.canvas.width = window.innerWidth;
+ ctx.canvas.height = window.innerHeight;
+ var radial = $("#bg").gradient({
+ x1: ctx.canvas.width/2, y1: ctx.canvas.height/2,
+ x2: ctx.canvas.width/2, y2: ctx.canvas.height/2,
+ r1: 0, r2: ctx.canvas.height,
+ c1: "#fbf9fd",
+ c2: "#dfc9de",
+ c3: "#b883b7"
+ });
+ $("#bg").addLayer({
+ method: "drawRect",
+ fillStyle: radial,
+ x: 0, y: 0,
+ width: ctx.canvas.width,
+ height: ctx.canvas.height,
+ fromCenter: false
+ })
+ .drawLayers();
+ });
+ </script>
+</body>
+</html>
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jCanvas gradient</title>
+ <style>
+ html, body { width:100%; height:100%; margin: 0px;}
+ canvas { display:block; }
+ </style>
+</head>
+<body>
+ <div id="content">
+ <canvas id="bg"></canvas>
+ </div>
+ <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
+ <script src="../../jcanvas.min.js"></script>
+ <script>
+ $(document).ready(function(){
+ var myBg = document.getElementById("bg");
+ var ctx = myBg.getContext('2d');
+ ctx.canvas.width = window.innerWidth;
+ ctx.canvas.height = window.innerHeight;
+ var radial = $("#bg").gradient({
+ x1: ctx.canvas.width/2, y1: ctx.canvas.height/2,
+ x2: ctx.canvas.width/2, y2: ctx.canvas.height/2,
+ r1: 0, r2: ctx.canvas.height,
+ c1: "#fbf9fd",
+ c2: "#dfc9de",
+ c3: "#b883b7"
+ });
+ $("#bg").addLayer({
+ method: "drawRect",
+ fillStyle: radial,
+ x: 0, y: 0,
+ width: ctx.canvas.width,
+ height: ctx.canvas.height,
+ fromCenter: false
+ })
+ .addLayer({
+ method: "drawPolygon",
+ strokeStyle: "#000000",
+ strokeWidth: 2,
+ fillStyle: "#0023ee",
+ opacity: 0.15,
+ x: 150, y: 140,
+ radius: 100,
+ sides: 6
+ })
+ .drawLayers();
+ });
+ </script>
+</body>
+</html>
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>simplest jCanvas</title>
+</head>
+<body>
+ <div id="content">
+ <canvas id="canvas"></canvas>
+ </div>
+ <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
+ <script src="../../jcanvas.min.js"></script>
+ <script>
+ $(document).ready(function(){
+ $("canvas").drawArc({
+ fillStyle: "green",
+ x: 100, y: 100,
+ radius: 50
+ });
+ });
+ </script>
+</body>
+</html>
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jCanvas issue 39</title>
+</head>
+<body>
+ <div id="content">
+ <canvas id="canvas" height="450" width="800"></canvas>
+ </div>
+ <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
+ <script src="../../jcanvas.min.js"></script>
+ <script>
+ $(document).ready(function(){
+ var rightX = 250,
+ works = "#090",
+ notyet = "#900",
+ leftX = 10,
+ gapY = 10,
+ tY = gapY,
+ hH = 40
+ function addBox(x,y,w,name,grp) {
+ $("canvas").addLayer({method: "drawRect", name: name,
+ fillStyle: notyet, fromCenter: false, group: grp,
+ x: x, y: y, width: w, height: hH})
+ }
+ function addTxt(x,y,txt,grp) {
+ $("canvas").addLayer({method: "drawText", group: grp,
+ x: x, y: y, fromCenter: false, fillStyle: "black",
+ strokeStyle: "black", text: txt})
+ }
+ function shiftBox(B) {
+ $("canvas").animateLayer(B, {x: rightX, fillStyle: works}, 2000)
+ }
+ function delayBox(B) {
+ $("canvas").delayLayer(B, 2000)
+ shiftBox(B)
+ }
+
+ // animateLayer objects
+ addBox(leftX,tY,180,"animateLayerName")
+ addTxt(rightX,tY+gapY,"animateLayer by name")
+ addBox(leftX,tY+(hH+gapY),180,"animateLayerObject")
+ addTxt(rightX,tY+gapY+(hH+gapY),"animateLayer by object")
+ addBox(leftX,tY+2*(hH+gapY),180,"animateLayerIndex")
+ addTxt(rightX,tY+gapY+2*(hH+gapY),"animateLayer by index")
+
+ // delayLayer test objects
+ addBox(leftX,tY+3*(hH+gapY),180,"delayLayerName")
+ addTxt(rightX,tY+gapY+3*(hH+gapY),"delayLayer by name")
+ addBox(leftX,tY+4*(hH+gapY),180,"delayLayerObject")
+ addTxt(rightX,tY+gapY+4*(hH+gapY),"delayLayer by object")
+ addBox(leftX,tY+5*(hH+gapY),180,"delayLayerIndex")
+ addTxt(rightX,tY+gapY+5*(hH+gapY),"delayLayer by index")
+
+ var rect2 = $("canvas").getLayer("animateLayerObject"),
+ rect5 = $("canvas").getLayer("delayLayerObject")
+
+ shiftBox("animateLayerName")
+ shiftBox(rect2)
+ shiftBox(4)
+
+ delayBox("delayLayerName")
+ delayBox(rect5)
+ delayBox(10)
+ });
+ </script>
+</body>
+</html>
@@ -0,0 +1,13 @@
+function addRadial(ctx) {
+ var radial = $("canvas").gradient({
+ x1: ctx.canvas.width/2, y1: ctx.canvas.height/2,
+ x2: ctx.canvas.width/2, y2: ctx.canvas.height/2,
+ r1: 0, r2: ctx.canvas.height,
+ c1: "#f9fbfe", c2: "#bfcfe2", c3: "#86a9bb"
+ });
+ $("canvas").addLayer({
+ method: "drawRect", fillStyle: radial,
+ x: 0, y: 0, width: ctx.canvas.width, height: ctx.canvas.height,
+ fromCenter: false
+ });
+}
@@ -0,0 +1,36 @@
+// polyline for regular hexagon, flat side on bottom
+function hexPolyline(ctx, cell_width, cell_height) {
+ ctx.beginPath();
+ ctx.moveTo(cell_width*1.5, cell_height*0.5);
+ ctx.lineTo(cell_width, cell_height*0.5);
+ ctx.lineTo(cell_width*0.75, cell_height-1);
+ ctx.lineTo(cell_width*0.25, cell_height-1);
+ ctx.lineTo(0, cell_height*0.5);
+ ctx.lineTo(cell_width*0.25, 0);
+ ctx.lineTo(cell_width*0.75, 0);
+ ctx.lineTo(cell_width, cell_height*0.5);
+ ctx.lineTo(cell_width*1.5, cell_height*0.5);
+ ctx.strokeStyle = "black";
+ ctx.stroke();
+}
+
+function toRadians(degrees) {
+ return degrees * (Math.PI/180);
+}
+
+function addGridOutline(ctx) {
+ var hexw = 30;
+ var hexh = hexw * Math.sin(toRadians(60));
+ var patt = $("canvas").pattern({
+ width: hexw*1.5, height: hexh,
+ source: function(pctx) {
+ hexPolyline(pctx, hexw, hexh);
+ },
+ repeat: "repeat"
+ });
+ $("canvas").addLayer({
+ method: "drawRect", fillStyle: patt,
+ x: 0, y: 0, width: ctx.canvas.width, height: ctx.canvas.height,
+ fromCenter: false
+ });
+}
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <style>
+ /* fill available window */
+ html, body { width:100%; height:100%; margin: 0px;}
+ /* turn off the scroll bars */
+ canvas { display:block; }
+ </style>
+ </head>
+ <body>
+ <div id="graphics">
+ <canvas id="canvas"></canvas>
+ </div>
+ <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
+ <script src="../../jcanvas.min.js"></script>
+ <script>
+ var canvas = document.getElementById("canvas");
+ var ctx = canvas.getContext("2d");
+ ctx.canvas.width = window.innerWidth;
+ ctx.canvas.height = window.innerHeight;
+ $.ajaxSetup({async: false});
+ $.getScript("jCanvas-layer-order-ext1.js");
+ $.getScript("jCanvas-layer-order-ext2.js");
+ $.ajaxSetup({async: true});
+ addRadial(ctx);
+ addGridOutline(ctx);
+ // Draw each layer onto the canvas
+ $("canvas").drawLayers();
+ </script>
+ </body>
+</html>
Oops, something went wrong.

0 comments on commit c9a6d04

Please sign in to comment.