r2626 - photoviewer: experimental canvas shadow
Author: joern.zaefferer
Date: Fri May 29 03:32:36 2009
New Revision: 2626
Modified:
branches/labs/photoviewer/demos/photoviewer/default.html
Log:
photoviewer: experimental canvas shadow
Modified: branches/labs/photoviewer/demos/photoviewer/default.html
==============================================================================
--- branches/labs/photoviewer/demos/photoviewer/default.html (original)
+++ branches/labs/photoviewer/demos/photoviewer/default.html Fri May 29
03:32:36 2009
@@ -21,11 +21,51 @@
window.setTimeout(function() {
$("#photos").photoviewer();
}, $.browser.safari ? 100 : 0);
+
+ /*
+ var width = 572, height = 362, cradius = 10;
+ var canvas = $("<canvas/>").prependTo("body")[0];
+ canvas.width = width; canvas.height = height;
+ var ctx = canvas.getContext("2d");
+
+
+ //ctx.fillStyle = "white";
+ ctx.fillStyle = "rgba(0, 0, 0, 0)";
+ //var i = 0;
+ for (var i = 0; i < 15; i++) {
+ ctx.beginPath();
+ ctx.moveTo(cradius + i, i);
+ ctx.quadraticCurveTo(i, i, i, cradius);
+
+ // wrong
+ ctx.lineTo(i, height - cradius);
+ ctx.quadraticCurveTo(i, height, cradius + i, height);
+
+ ctx.lineTo(width - cradius, height);
+ ctx.quadraticCurveTo(width, height, width, height - cradius);
+
+ // wrong
+ ctx.lineTo(width, cradius + i);
+ ctx.quadraticCurveTo(width, i, width - cradius, i);
+
+ ctx.lineTo(cradius, i);
+ ctx.fill();
+ width--;
+ height--;
+ //ctx.fillStyle = 'rgb(' + (255-i*2) + "," + (255-i*2) + "," +
(255-i*2) + ")";
+ ctx.fillStyle = "rgba(150, 150, 150, " + (0.2/15*i) + ")";
+ }
+ */
});
</script>
<style>
a img {
border: none;
+ }
+ canvas {
+ position: absolute;
+ top: 130px;
+ left: 346px;
}
</style>
</head>