Permalink
Browse files

init

  • Loading branch information...
em committed Sep 1, 2013
0 parents commit a5935e5cf5005408063e711688fbc2dedcde5e19
@@ -0,0 +1,4 @@
+components
+build
+node_modules
+.DS_Store
@@ -0,0 +1,16 @@
+all: build/build.js
+
+build/build.js: index.js lib/*.js
+ # rebuild
+ @component build --dev -s GCanvas
+
+components: component.json
+ @component install --dev
+
+test:
+ @mocha -R list
+
+clean:
+ rm -fr build components template.js
+
+.PHONY: clean test
@@ -0,0 +1,23 @@
+{
+ "name": "gcanvas",
+ "repo": "em/gcanvas",
+ "description": "",
+ "version": "0.0.1",
+ "keywords": [],
+ "locals": ["../three"],
+ "development": {},
+ "license": "MIT",
+ "scripts": [
+ "index.js",
+ "lib/three.custom.js",
+ "lib/clipper.js",
+ "lib/gcanvas.js",
+ "lib/motion.js",
+ "lib/parsefont.js",
+ "lib/utils.js",
+ "lib/drivers/gcode.js",
+ "lib/drivers/filter.js",
+ "lib/drivers/simulator.js",
+ "lib/fonts/helvetiker_regular.typeface.js"
+ ]
+}
@@ -0,0 +1,11 @@
+example('arcs', function(ctx) {
+ ctx.arc(100, 100, 80, 0, Math.PI * 1.5);
+ ctx.arc(100, 100, 60, 0, Math.PI * 1.5, true);
+ ctx.arc(100, 100, 40, 0, Math.PI * 1.5, true);
+ ctx.stroke();
+
+ // Isolated circle with beginPath
+ ctx.beginPath();
+ ctx.arc(100, 100, 20, 0, Math.PI * 2);
+ ctx.stroke();
+});
@@ -0,0 +1,115 @@
+<style>
+body {
+ background: #fff;
+ font-family: "helvetica neue";
+}
+
+h1 {
+ margin: 20px;
+ font-weight: 300;
+}
+
+h2 {
+ margin: 20px;
+ font-weight: 300;
+}
+.example {
+ /* border-bottom: 1px solid gray; */
+ position: relative;
+ height: 300px;
+}
+
+.real {
+ background: white;
+ position: absolute;
+ left: 20px;
+ border: 1px solid #ddd;
+}
+
+.sim {
+ background: white;
+ position: absolute;
+ left: 240px;
+ border: 1px solid #ddd;
+}
+
+.gcode {
+ position: absolute;
+ left: 460px;
+ right: 20px;
+ top: 33px;
+ /* background: white; */
+ border: 1px solid #ddd;
+ height: 200px;
+ overflow-y: auto;
+}
+
+.rows {
+ height: 20px;
+}
+
+.th-real {
+ position: absolute;
+ left: 30px;
+}
+
+.th-sim {
+ position: absolute;
+ left: 250px;
+}
+
+.th-gcode {
+ position: absolute;
+ left: 470px;
+}
+
+</style>
+
+<h1>GCanvas Examples</h1>
+<div class="rows">
+ <div class="th th-real">HTML5 Canvas</div>
+ <div class="th th-sim">Simulation Driver</div>
+ <div class="th th-gcode">Gcode Driver</div>
+</div>
+
+<div id="examples"></div>
+<script>
+function example(name, fn) {
+ var html = '';
+ html += '<h2>'+name+'</h2>'
+ html += '<canvas class="real" width=200 height=200></canvas>'
+ html += '<canvas class="sim" width=200 height=200></canvas>'
+ html += '<ul class="gcode"></ul>'
+ var ex = document.createElement('div');
+ ex.className = 'example';
+ ex.innerHTML = html;
+ document.getElementById('examples').appendChild(ex);
+
+ var ctx = ex.getElementsByClassName('real')[0].getContext('2d');
+ var simtarget = ex.getElementsByClassName('sim')[0].getContext('2d');
+
+ var simdriver = new GCanvas.Simulator(simtarget);
+ var simctx = new GCanvas(simdriver, 200, 200);
+ var gcodectx = new GCanvas(null, 200, 200);
+
+ var gcodeElem = ex.getElementsByClassName('gcode')[0];
+ gcodectx.driver.stream.write = function(cmd) {
+ var line = document.createElement('li');
+ line.innerText = cmd;
+ gcodeElem.appendChild(line);
+ };
+
+ fn(ctx);
+ fn(simctx);
+ fn(gcodectx);
+
+ simtarget.stroke();
+}
+
+</script>
+
+<script src="../build/build.js"></script>
+<script src="arc.js"></script>
+<script src="star.js"></script>
+<script src="text.js"></script>
+<script src="portal2.js"></script>
@@ -0,0 +1,91 @@
+// Good example of a bunch of different canvas features.
+// http://www.codeproject.com/Articles/237065/Introduction-to-HTML5-Canvas-Part-2-Example
+example('portal2', function(ctx) {
+ ctx.scale(0.6,0.6);
+ portal2(ctx);
+});
+
+function portal2(ctx) {
+ //function to convert deg to radian
+ var acDegToRad = function(deg){
+ return deg* (-(Math.PI / 180.0));
+ }
+
+ //save the initial state of the context
+ ctx.save();
+ //set fill color to gray
+ ctx.fillStyle = "rgb(110,110,110)";
+ //save the current state with fillcolor
+ ctx.save();
+
+ //draw 2's base rectangle
+ ctx.fillRect(20,200,120,35);
+ //bring origin to 2's base
+ ctx.translate(20,200);
+ //rotate the canvas 35 deg anti-clockwise
+ ctx.rotate(acDegToRad(35));
+ //draw 2's slant rectangle
+ ctx.fillRect(0,0,100,35);
+ //restore the canvas to reset transforms
+ ctx.restore();
+ //set stroke color width and draw the 2's top semi circle
+ ctx.strokeStyle = "rgb(110,110,110)";
+ ctx.lineWidth = 35;
+ ctx.beginPath();
+ ctx.arc(77,135,40,acDegToRad(-40),acDegToRad(180),true);
+ ctx.stroke();
+
+ //reset canvas transforms
+ ctx.restore();
+
+ //change color to blue
+ ctx.fillStyle = "rgb(0,160,212)";
+ //save current state of canvas
+ ctx.save();
+ //draw long dividing rectangle
+ ctx.fillRect(162,20,8,300);
+ //draw player head circle
+ ctx.beginPath();
+ ctx.arc(225,80,35,acDegToRad(0),acDegToRad(360));
+ ctx.fill();
+
+ //start new path for tummy :)
+ ctx.beginPath();
+ ctx.moveTo(170,90);
+ ctx.lineTo(230,140);
+ ctx.lineTo(170,210);
+ ctx.fill();
+
+ //start new path for hand
+ //set lineCap and lineJoin to "round", blue color
+ //for stroke, and width of 25px
+ ctx.lineWidth = 25;
+ ctx.lineCap = "round";
+ ctx.strokeStyle = "rgb(0,160,212)";
+ ctx.lineJoin = "round";
+ ctx.beginPath();
+ ctx.moveTo(222,150);
+ ctx.lineTo(230,190);
+ ctx.lineTo(270,220);
+ ctx.stroke();
+
+ ctx.beginPath();
+ ctx.moveTo(170, 200);
+ ctx.lineTo(250, 260);
+ ctx.lineTo(170,320);
+ ctx.clip();
+
+ //begin new path for drawing leg
+ ctx.beginPath();
+ ctx.moveTo(160,210);
+ ctx.lineTo(195,260);
+ ctx.lineTo(160,290);
+ ctx.stroke();
+
+ //restore the <code class="prettyprint">context</code>
+ //back to its initial state
+ ctx.restore();
+ // body...
+}
+
+
@@ -0,0 +1,19 @@
+example('star', function(ctx) {
+ star(ctx, 100, 100, 90, 5, 0.5);
+});
+
+function star(ctx, x, y, r, p, m)
+{
+ ctx.translate(x, y);
+ ctx.moveTo(0,0-r);
+ for (var i = 0; i < p; i++)
+ {
+ ctx.rotate(Math.PI / p);
+ ctx.lineTo(0, 0 - (r*m));
+ ctx.rotate(Math.PI / p);
+ ctx.lineTo(0, 0 - r);
+ }
+ ctx.fill();
+}
+
+
Oops, something went wrong.

0 comments on commit a5935e5

Please sign in to comment.