Skip to content

Commit a297c79

Browse files
LinusULinusU
committed
Merge pull request #776 from LinusU/example-cleanup
Cleanup examples
2 parents 8e2978b + dbe6a5d commit a297c79

22 files changed

+758
-924
lines changed

‎examples/clock.js‎

Lines changed: 98 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,113 @@
1+
var fs = require('fs')
2+
var path = require('path')
3+
var Canvas = require('..')
14

2-
/**
3-
* Module dependencies.
4-
*/
5-
6-
var Canvas = require('../lib/canvas')
7-
, canvas = new Canvas(320, 320)
8-
, ctx = canvas.getContext('2d')
9-
, fs = require('fs');
10-
11-
function getX(angle) {
12-
return -Math.sin(angle + Math.PI);
5+
function getX (angle) {
6+
return -Math.sin(angle + Math.PI)
137
}
14-
function getY(angle) {
15-
return Math.cos(angle + Math.PI);
8+
9+
function getY (angle) {
10+
return Math.cos(angle + Math.PI)
1611
}
1712

18-
function clock(ctx){
19-
var now = new Date();
20-
ctx.clearRect(0,0,320,320);
21-
22-
ctx.save();
23-
ctx.translate(160,160);
24-
ctx.beginPath();
25-
ctx.lineWidth = 14;
26-
ctx.strokeStyle = '#325FA2';
27-
ctx.fillStyle = '#eeeeee';
28-
ctx.arc(0,0,142,0,Math.PI*2,true);
29-
ctx.stroke();
30-
ctx.fill();
31-
32-
ctx.strokeStyle = '#000000';
13+
function clock (ctx) {
14+
var x, y, i
15+
var now = new Date()
16+
17+
ctx.clearRect(0, 0, 320, 320)
18+
19+
ctx.save()
20+
21+
ctx.translate(160, 160)
22+
ctx.beginPath()
23+
ctx.lineWidth = 14
24+
ctx.strokeStyle = '#325FA2'
25+
ctx.fillStyle = '#eeeeee'
26+
ctx.arc(0, 0, 142, 0, Math.PI * 2, true)
27+
ctx.stroke()
28+
ctx.fill()
29+
3330
// Hour marks
34-
ctx.lineWidth = 8;
35-
for (var i=0;i<12;i++){
36-
var x = getX(Math.PI/6*i);
37-
var y = getY(Math.PI/6*i);
38-
ctx.beginPath();
39-
ctx.moveTo(x*100,y*100);
40-
ctx.lineTo(x*125,y*125);
41-
ctx.stroke();
31+
ctx.lineWidth = 8
32+
ctx.strokeStyle = '#000000'
33+
for (i = 0; i < 12; i++) {
34+
x = getX(Math.PI / 6 * i)
35+
y = getY(Math.PI / 6 * i)
36+
ctx.beginPath()
37+
ctx.moveTo(x * 100, y * 100)
38+
ctx.lineTo(x * 125, y * 125)
39+
ctx.stroke()
4240
}
4341

4442
// Minute marks
45-
ctx.lineWidth = 5;
46-
for (i=0;i<60;i++){
47-
if (i%5!=0) {
48-
var x = getX(Math.PI/30*i);
49-
var y = getY(Math.PI/30*i);
50-
ctx.beginPath();
51-
ctx.moveTo(x*117,y*117);
52-
ctx.lineTo(x*125,y*125);
53-
ctx.stroke();
43+
ctx.lineWidth = 5
44+
ctx.strokeStyle = '#000000'
45+
for (i = 0; i < 60; i++) {
46+
if (i % 5 !== 0) {
47+
x = getX(Math.PI / 30 * i)
48+
y = getY(Math.PI / 30 * i)
49+
ctx.beginPath()
50+
ctx.moveTo(x * 117, y * 117)
51+
ctx.lineTo(x * 125, y * 125)
52+
ctx.stroke()
5453
}
5554
}
56-
57-
var sec = now.getSeconds();
58-
var min = now.getMinutes();
59-
var hr = now.getHours();
60-
hr = hr>=12 ? hr-12 : hr;
61-
62-
ctx.fillStyle = "black";
63-
64-
// write Hours
65-
var x = getX(hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec);
66-
var y = getY(hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec);
67-
ctx.lineWidth = 14;
68-
ctx.beginPath();
69-
ctx.moveTo(x*-20,y*-20);
70-
ctx.lineTo(x*80,y*80);
71-
ctx.stroke();
72-
73-
// write Minutes
74-
var x = getX((Math.PI/30)*min + (Math.PI/1800)*sec);
75-
var y = getY((Math.PI/30)*min + (Math.PI/1800)*sec);
76-
77-
ctx.lineWidth = 10;
78-
ctx.beginPath();
79-
ctx.moveTo(x*-28,y*-28);
80-
ctx.lineTo(x*112,y*112);
81-
ctx.stroke();
82-
55+
56+
var sec = now.getSeconds()
57+
var min = now.getMinutes()
58+
var hr = now.getHours() % 12
59+
60+
ctx.fillStyle = 'black'
61+
62+
// Write hours
63+
x = getX(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec)
64+
y = getY(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec)
65+
ctx.lineWidth = 14
66+
ctx.beginPath()
67+
ctx.moveTo(x * -20, y * -20)
68+
ctx.lineTo(x * 80, y * 80)
69+
ctx.stroke()
70+
71+
// Write minutes
72+
x = getX((Math.PI / 30) * min + (Math.PI / 1800) * sec)
73+
y = getY((Math.PI / 30) * min + (Math.PI / 1800) * sec)
74+
75+
ctx.lineWidth = 10
76+
ctx.beginPath()
77+
ctx.moveTo(x * -28, y * -28)
78+
ctx.lineTo(x * 112, y * 112)
79+
ctx.stroke()
80+
8381
// Write seconds
84-
var x = getX(sec * Math.PI/30);
85-
var y = getY(sec * Math.PI/30);
86-
ctx.strokeStyle = "#D40000";
87-
ctx.fillStyle = "#D40000";
88-
ctx.lineWidth = 6;
89-
ctx.beginPath();
90-
ctx.moveTo(x*-30,y*-30);
91-
ctx.lineTo(x*83,y*83);
92-
ctx.stroke();
93-
ctx.beginPath();
94-
ctx.arc(0,0,10,0,Math.PI*2,true);
95-
ctx.fill();
96-
ctx.beginPath();
97-
ctx.arc(x*95,y*95,10,0,Math.PI*2,true);
98-
ctx.stroke();
99-
ctx.fillStyle = "#555";
100-
ctx.arc(0,0,3,0,Math.PI*2,true);
101-
ctx.fill();
102-
103-
ctx.restore();
82+
x = getX(sec * Math.PI / 30)
83+
y = getY(sec * Math.PI / 30)
84+
ctx.strokeStyle = '#D40000'
85+
ctx.fillStyle = '#D40000'
86+
ctx.lineWidth = 6
87+
ctx.beginPath()
88+
ctx.moveTo(x * -30, y * -30)
89+
ctx.lineTo(x * 83, y * 83)
90+
ctx.stroke()
91+
ctx.beginPath()
92+
ctx.arc(0, 0, 10, 0, Math.PI * 2, true)
93+
ctx.fill()
94+
ctx.beginPath()
95+
ctx.arc(x * 95, y * 95, 10, 0, Math.PI * 2, true)
96+
ctx.stroke()
97+
ctx.fillStyle = '#555'
98+
ctx.arc(0, 0, 3, 0, Math.PI * 2, true)
99+
ctx.fill()
100+
101+
ctx.restore()
104102
}
105103

106-
clock(ctx);
104+
module.exports = clock
107105

108-
var out = fs.createWriteStream(__dirname + '/clock.png')
109-
, stream = canvas.createPNGStream();
106+
if (require.main === module) {
107+
var canvas = new Canvas(320, 320)
108+
var ctx = canvas.getContext('2d')
110109

111-
stream.on('data', function(chunk){
112-
out.write(chunk);
113-
});
110+
clock(ctx)
111+
112+
canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'clock.png')))
113+
}

‎examples/crop.js‎

Lines changed: 20 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,29 @@
1+
var fs = require('fs')
2+
var path = require('path')
3+
var Canvas = require('..')
14

2-
/**
3-
* Module dependencies.
4-
*/
5+
var Image = Canvas.Image
6+
var img = new Image()
57

6-
var Canvas = require('../lib/canvas')
7-
, Image = Canvas.Image
8-
, fs = require('fs');
8+
img.onerror = function (err) {
9+
throw err
10+
}
911

10-
var img = new Image;
11-
12-
img.onerror = function(err){
13-
throw err;
14-
};
15-
16-
img.onload = function(){
12+
img.onload = function () {
1713
var w = img.width / 2
18-
, h = img.height / 2
19-
, canvas = new Canvas(w, h)
20-
, ctx = canvas.getContext('2d');
21-
22-
ctx.drawImage(img, 0, 0, w, h, 0, 0, w, h);
14+
var h = img.height / 2
15+
var canvas = new Canvas(w, h)
16+
var ctx = canvas.getContext('2d')
2317

24-
var out = fs.createWriteStream(__dirname + '/crop.jpg');
18+
ctx.drawImage(img, 0, 0, w, h, 0, 0, w, h)
2519

20+
var out = fs.createWriteStream(path.join(__dirname, 'crop.png'))
2621
var stream = canvas.createJPEGStream({
27-
bufsize : 2048,
28-
quality : 80
29-
});
30-
31-
stream.pipe(out);
32-
};
33-
34-
img.src = __dirname + '/images/squid.png';
22+
bufsize: 2048,
23+
quality: 80
24+
})
3525

26+
stream.pipe(out)
27+
}
3628

29+
img.src = path.join(__dirname, 'images', 'squid.png')

‎examples/font.js‎

Lines changed: 21 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,39 @@
1+
var fs = require('fs')
2+
var path = require('path')
3+
var Canvas = require('..')
14

2-
/**
3-
* Module dependencies.
4-
*/
5-
6-
var Canvas = require('../lib/canvas')
7-
, canvas = new Canvas(320, 320)
8-
, Font = Canvas.Font
9-
, ctx = canvas.getContext('2d')
10-
, fs = require('fs')
11-
, path = require("path");
5+
var Font = Canvas.Font
126

137
if (!Font) {
14-
throw new Error('Need to compile with font support');
8+
throw new Error('Need to compile with font support')
159
}
1610

17-
function fontFile(name) {
18-
return path.join(__dirname, '/pfennigFont/', name);
11+
function fontFile (name) {
12+
return path.join(__dirname, '/pfennigFont/', name)
1913
}
2014

21-
var pfennigFont = new Font('pfennigFont', fontFile('Pfennig.ttf'));
22-
pfennigFont.addFace(fontFile('PfennigBold.ttf'), 'bold');
23-
pfennigFont.addFace(fontFile('PfennigItalic.ttf'), 'normal', 'italic');
24-
pfennigFont.addFace(fontFile('PfennigBoldItalic.ttf'), 'bold', 'italic');
15+
var pfennigFont = new Font('pfennigFont', fontFile('Pfennig.ttf'))
16+
pfennigFont.addFace(fontFile('PfennigBold.ttf'), 'bold')
17+
pfennigFont.addFace(fontFile('PfennigItalic.ttf'), 'normal', 'italic')
18+
pfennigFont.addFace(fontFile('PfennigBoldItalic.ttf'), 'bold', 'italic')
2519

2620
var canvas = new Canvas(320, 320)
2721
var ctx = canvas.getContext('2d')
2822

2923
// Tell the ctx to use the font.
30-
ctx.addFont(pfennigFont);
31-
32-
ctx.font = 'normal normal 50px Helvetica';
24+
ctx.addFont(pfennigFont)
3325

34-
ctx.fillText('Quo Vaids?', 0, 70);
26+
ctx.font = 'normal normal 50px Helvetica'
3527

36-
ctx.font = 'bold 50px pfennigFont';
37-
ctx.fillText('Quo Vaids?', 0, 140);
28+
ctx.fillText('Quo Vaids?', 0, 70)
3829

39-
ctx.font = 'italic 50px pfennigFont';
40-
ctx.fillText('Quo Vaids?', 0, 210);
30+
ctx.font = 'bold 50px pfennigFont'
31+
ctx.fillText('Quo Vaids?', 0, 140)
4132

42-
ctx.font = 'bold italic 50px pfennigFont';
43-
ctx.fillText('Quo Vaids?', 0, 280);
33+
ctx.font = 'italic 50px pfennigFont'
34+
ctx.fillText('Quo Vaids?', 0, 210)
4435

45-
var out = fs.createWriteStream(__dirname + '/font.png');
46-
var stream = canvas.createPNGStream();
36+
ctx.font = 'bold italic 50px pfennigFont'
37+
ctx.fillText('Quo Vaids?', 0, 280)
4738

48-
stream.on('data', function(chunk){
49-
out.write(chunk);
50-
});
39+
canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'font.png')))

0 commit comments

Comments
 (0)