Skip to content

Cleanup examples #776

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 3, 2016
Merged

Cleanup examples #776

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
196 changes: 98 additions & 98 deletions examples/clock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,113 +1,113 @@
var fs = require('fs')
var path = require('path')
var Canvas = require('..')

/**
* Module dependencies.
*/

var Canvas = require('../lib/canvas')
, canvas = new Canvas(320, 320)
, ctx = canvas.getContext('2d')
, fs = require('fs');

function getX(angle) {
return -Math.sin(angle + Math.PI);
function getX (angle) {
return -Math.sin(angle + Math.PI)
}
function getY(angle) {
return Math.cos(angle + Math.PI);

function getY (angle) {
return Math.cos(angle + Math.PI)
}

function clock(ctx){
var now = new Date();
ctx.clearRect(0,0,320,320);

ctx.save();
ctx.translate(160,160);
ctx.beginPath();
ctx.lineWidth = 14;
ctx.strokeStyle = '#325FA2';
ctx.fillStyle = '#eeeeee';
ctx.arc(0,0,142,0,Math.PI*2,true);
ctx.stroke();
ctx.fill();

ctx.strokeStyle = '#000000';
function clock (ctx) {
var x, y, i
var now = new Date()

ctx.clearRect(0, 0, 320, 320)

ctx.save()

ctx.translate(160, 160)
ctx.beginPath()
ctx.lineWidth = 14
ctx.strokeStyle = '#325FA2'
ctx.fillStyle = '#eeeeee'
ctx.arc(0, 0, 142, 0, Math.PI * 2, true)
ctx.stroke()
ctx.fill()

// Hour marks
ctx.lineWidth = 8;
for (var i=0;i<12;i++){
var x = getX(Math.PI/6*i);
var y = getY(Math.PI/6*i);
ctx.beginPath();
ctx.moveTo(x*100,y*100);
ctx.lineTo(x*125,y*125);
ctx.stroke();
ctx.lineWidth = 8
ctx.strokeStyle = '#000000'
for (i = 0; i < 12; i++) {
x = getX(Math.PI / 6 * i)
y = getY(Math.PI / 6 * i)
ctx.beginPath()
ctx.moveTo(x * 100, y * 100)
ctx.lineTo(x * 125, y * 125)
ctx.stroke()
}

// Minute marks
ctx.lineWidth = 5;
for (i=0;i<60;i++){
if (i%5!=0) {
var x = getX(Math.PI/30*i);
var y = getY(Math.PI/30*i);
ctx.beginPath();
ctx.moveTo(x*117,y*117);
ctx.lineTo(x*125,y*125);
ctx.stroke();
ctx.lineWidth = 5
ctx.strokeStyle = '#000000'
for (i = 0; i < 60; i++) {
if (i % 5 !== 0) {
x = getX(Math.PI / 30 * i)
y = getY(Math.PI / 30 * i)
ctx.beginPath()
ctx.moveTo(x * 117, y * 117)
ctx.lineTo(x * 125, y * 125)
ctx.stroke()
}
}

var sec = now.getSeconds();
var min = now.getMinutes();
var hr = now.getHours();
hr = hr>=12 ? hr-12 : hr;

ctx.fillStyle = "black";

// write Hours
var x = getX(hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec);
var y = getY(hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec);
ctx.lineWidth = 14;
ctx.beginPath();
ctx.moveTo(x*-20,y*-20);
ctx.lineTo(x*80,y*80);
ctx.stroke();

// write Minutes
var x = getX((Math.PI/30)*min + (Math.PI/1800)*sec);
var y = getY((Math.PI/30)*min + (Math.PI/1800)*sec);

ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(x*-28,y*-28);
ctx.lineTo(x*112,y*112);
ctx.stroke();


var sec = now.getSeconds()
var min = now.getMinutes()
var hr = now.getHours() % 12

ctx.fillStyle = 'black'

// Write hours
x = getX(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec)
y = getY(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec)
ctx.lineWidth = 14
ctx.beginPath()
ctx.moveTo(x * -20, y * -20)
ctx.lineTo(x * 80, y * 80)
ctx.stroke()

// Write minutes
x = getX((Math.PI / 30) * min + (Math.PI / 1800) * sec)
y = getY((Math.PI / 30) * min + (Math.PI / 1800) * sec)

ctx.lineWidth = 10
ctx.beginPath()
ctx.moveTo(x * -28, y * -28)
ctx.lineTo(x * 112, y * 112)
ctx.stroke()

// Write seconds
var x = getX(sec * Math.PI/30);
var y = getY(sec * Math.PI/30);
ctx.strokeStyle = "#D40000";
ctx.fillStyle = "#D40000";
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(x*-30,y*-30);
ctx.lineTo(x*83,y*83);
ctx.stroke();
ctx.beginPath();
ctx.arc(0,0,10,0,Math.PI*2,true);
ctx.fill();
ctx.beginPath();
ctx.arc(x*95,y*95,10,0,Math.PI*2,true);
ctx.stroke();
ctx.fillStyle = "#555";
ctx.arc(0,0,3,0,Math.PI*2,true);
ctx.fill();

ctx.restore();
x = getX(sec * Math.PI / 30)
y = getY(sec * Math.PI / 30)
ctx.strokeStyle = '#D40000'
ctx.fillStyle = '#D40000'
ctx.lineWidth = 6
ctx.beginPath()
ctx.moveTo(x * -30, y * -30)
ctx.lineTo(x * 83, y * 83)
ctx.stroke()
ctx.beginPath()
ctx.arc(0, 0, 10, 0, Math.PI * 2, true)
ctx.fill()
ctx.beginPath()
ctx.arc(x * 95, y * 95, 10, 0, Math.PI * 2, true)
ctx.stroke()
ctx.fillStyle = '#555'
ctx.arc(0, 0, 3, 0, Math.PI * 2, true)
ctx.fill()

ctx.restore()
}

clock(ctx);
module.exports = clock

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

stream.on('data', function(chunk){
out.write(chunk);
});
clock(ctx)

canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'clock.png')))
}
47 changes: 20 additions & 27 deletions examples/crop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,29 @@
var fs = require('fs')
var path = require('path')
var Canvas = require('..')

/**
* Module dependencies.
*/
var Image = Canvas.Image
var img = new Image()

var Canvas = require('../lib/canvas')
, Image = Canvas.Image
, fs = require('fs');
img.onerror = function (err) {
throw err
}

var img = new Image;

img.onerror = function(err){
throw err;
};

img.onload = function(){
img.onload = function () {
var w = img.width / 2
, h = img.height / 2
, canvas = new Canvas(w, h)
, ctx = canvas.getContext('2d');

ctx.drawImage(img, 0, 0, w, h, 0, 0, w, h);
var h = img.height / 2
var canvas = new Canvas(w, h)
var ctx = canvas.getContext('2d')

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

var out = fs.createWriteStream(path.join(__dirname, 'crop.png'))
var stream = canvas.createJPEGStream({
bufsize : 2048,
quality : 80
});

stream.pipe(out);
};

img.src = __dirname + '/images/squid.png';
bufsize: 2048,
quality: 80
})

stream.pipe(out)
}

img.src = path.join(__dirname, 'images', 'squid.png')
53 changes: 21 additions & 32 deletions examples/font.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,39 @@
var fs = require('fs')
var path = require('path')
var Canvas = require('..')

/**
* Module dependencies.
*/

var Canvas = require('../lib/canvas')
, canvas = new Canvas(320, 320)
, Font = Canvas.Font
, ctx = canvas.getContext('2d')
, fs = require('fs')
, path = require("path");
var Font = Canvas.Font

if (!Font) {
throw new Error('Need to compile with font support');
throw new Error('Need to compile with font support')
}

function fontFile(name) {
return path.join(__dirname, '/pfennigFont/', name);
function fontFile (name) {
return path.join(__dirname, '/pfennigFont/', name)
}

var pfennigFont = new Font('pfennigFont', fontFile('Pfennig.ttf'));
pfennigFont.addFace(fontFile('PfennigBold.ttf'), 'bold');
pfennigFont.addFace(fontFile('PfennigItalic.ttf'), 'normal', 'italic');
pfennigFont.addFace(fontFile('PfennigBoldItalic.ttf'), 'bold', 'italic');
var pfennigFont = new Font('pfennigFont', fontFile('Pfennig.ttf'))
pfennigFont.addFace(fontFile('PfennigBold.ttf'), 'bold')
pfennigFont.addFace(fontFile('PfennigItalic.ttf'), 'normal', 'italic')
pfennigFont.addFace(fontFile('PfennigBoldItalic.ttf'), 'bold', 'italic')

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

// Tell the ctx to use the font.
ctx.addFont(pfennigFont);

ctx.font = 'normal normal 50px Helvetica';
ctx.addFont(pfennigFont)

ctx.fillText('Quo Vaids?', 0, 70);
ctx.font = 'normal normal 50px Helvetica'

ctx.font = 'bold 50px pfennigFont';
ctx.fillText('Quo Vaids?', 0, 140);
ctx.fillText('Quo Vaids?', 0, 70)

ctx.font = 'italic 50px pfennigFont';
ctx.fillText('Quo Vaids?', 0, 210);
ctx.font = 'bold 50px pfennigFont'
ctx.fillText('Quo Vaids?', 0, 140)

ctx.font = 'bold italic 50px pfennigFont';
ctx.fillText('Quo Vaids?', 0, 280);
ctx.font = 'italic 50px pfennigFont'
ctx.fillText('Quo Vaids?', 0, 210)

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

stream.on('data', function(chunk){
out.write(chunk);
});
canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'font.png')))
Loading