Skip to content

Instantly share code, notes, and snippets.

@antonmills
Created October 2, 2012 13:07
Show Gist options
  • Select an option

  • Save antonmills/3818959 to your computer and use it in GitHub Desktop.

Select an option

Save antonmills/3818959 to your computer and use it in GitHub Desktop.
Canvas work with TypeScript (image.onload now using a Lambda for scope)
/**
* class manages drawing to a canvas
* @author antonmills. (http://www.antonmills.com / http://www.twitter.com/antonmill)
*/
class MapController {
// privates (hehe ;p)
private _canvas; // the render target
private _image; // the source image
private _ctx; // ctx
private _timer; // a simple timer
private _startX = 0;
private _startY = 0;
private _counter;
// general init, load image from string
constructor(canvas, imagePath:string) {
this._canvas = canvas;
this._canvas.width = 960;
this._canvas.height = 640;
this._ctx = this._canvas.getContext('2d');
this._image = new Image();
this._image.onload = (() => this.imageReady(this));
this._image.src = imagePath;
}
// on complete
imageReady(p:MapController) {
this._ctx.drawImage(this._image, 0, 0, 960, 640);
this._counter = setInterval(() => this.deformTerrain(this._startX += 20, this._startY, 40), 1000);
}
deformTerrain(size:number, posX:number, posY:number) {
var g = this._ctx.createRadialGradient(posX + (size / 2), posY + (size / 2), 0, posX + (size / 2), posY + (size / 2), size);
g.addColorStop(1, 'rgba(0,0,255,0)');
g.addColorStop(0.99, 'rgba(0,0,255,1)');
g.addColorStop(0, 'rgba(0,0,255,1)');
this._ctx.fillStyle = g;
this._ctx.globalCompositeOperation = 'xor';
this._ctx.fillRect(posX - (size / 2), posY - (size / 2), size * 2, size * 2);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment