* @param {Array} colors - An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.
* @param {Array} ratios - An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw the first color to 10% then interpolating to the second color at 90%.
* @param {number} x0 - The position of the first point defining the line that defines the gradient direction and size.
* @param {number} y0 - The position of the first point defining the line that defines the gradient direction and size.
* @param {number} x1 - The position of the second point defining the line that defines the gradient direction and size.
* @param {number} y1 - The position of the second point defining the line that defines the gradient direction and size.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
beginLinearGradientFill: function (colors, ratios, x0, y0, x1, y1) {
var gradient = this.createLinearGradient(x0, y0, x1, y1);
for (var i = 0, len = colors.length; i < len; i++)
{
gradient.addColorStop(ratios[i], colors[i]);
}
this.fillStyle(gradient);
return this;
},
/**
* Begins a linear gradient stroke defined by the line (x0, y0) to (x1, y1). This ends the current sub-path. For
* example, the following code defines a black to white vertical gradient ranging from 20px to 120px, and draws a
* @param {Array} colors - An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.
* @param {Array} ratios - An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw the first color to 10% then interpolating to the second color at 90%.
* @param {number} x0 - The position of the first point defining the line that defines the gradient direction and size.
* @param {number} y0 - The position of the first point defining the line that defines the gradient direction and size.
* @param {number} x1 - The position of the second point defining the line that defines the gradient direction and size.
* @param {number} y1 - The position of the second point defining the line that defines the gradient direction and size.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
beginLinearGradientStroke: function (colors, ratios, x0, y0, x1, y1) {
var gradient = this.createLinearGradient(x0, y0, x1, y1);
for (var i = 0, len = colors.length; i < len; i++)
{
gradient.addColorStop(ratios[i], colors[i]);
}
this.strokeStyle(gradient);
return this;
},
/**
* Begins a radial gradient stroke. This ends the current sub-path. For example, the following code defines a red to
* blue radial gradient centered at (100, 100), with a radius of 50, and draws a rectangle to display it:
* @param {Array} colors - An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.
* @param {Array} ratios - An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw the first color to 10% then interpolating to the second color at 90%.
* @param {number} x0 - Center position of the inner circle that defines the gradient.
* @param {number} y0 - Center position of the inner circle that defines the gradient.
* @param {number} r0 - Radius of the inner circle that defines the gradient.
* @param {number} x1 - Center position of the outer circle that defines the gradient.
* @param {number} y1 - Center position of the outer circle that defines the gradient.
* @param {number} r1 - Radius of the outer circle that defines the gradient.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
* Draws a circle with the specified radius at (x, y).
* @method Phaser.BitmapData#circle
* @param {number} x - x coordinate center point of circle.
* @param {number} y - y coordinate center point of circle.
* @param {number} radius - Radius of circle in radians.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
circle: function (x, y, radius) {
this.arc(x, y, radius, 0, Math.PI*2);
return this;
},
/**
* Sets all pixels in the rectangle defined by starting point (x, y) and size (width, height) to transparent black.
* @method Phaser.BitmapData#clearRect
* @param {number} x - The x axis of the coordinate for the rectangle starting point.
* @param {number} y - The y axis of the coordinate for the rectangle starting point.
* @param {number} width - The rectangles width.
* @param {number} height - The rectangles height.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
clearRect: function (x, y, width, height) {
this._dirty = true;
this.context.clearRect(x, y, width, height);
return this;
},
/**
* Creates a clipping path from the current sub-paths. Everything drawn after clip() is called appears inside the clipping path only.
* @method Phaser.BitmapData#clip
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
clip: function () {
this._dirty = true;
this.context.clip();
return this;
},
/**
* Tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.
* @method Phaser.BitmapData#closePath
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
closePath: function () {
this._dirty = true;
this.context.closePath();
return this;
},
/**
* Creates a linear gradient with defined by an imaginary line which implies the direction of the gradient.
* Once the gradient is created colors can be inserted using the addColorStop method.
* @method Phaser.BitmapData#createLinearGradient
* @param {number} x - The x axis of the coordinate for the gradients starting point.
* @param {number} y - The y axis of the coordinate for the gradients starting point.
* @param {number} width - The width of the gradient.
* @param {number} height - The height of the gradient.
* @return {CanvasGradient} The Linear Gradient.
*/
createLinearGradient: function (x, y, width, height) {
return this.context.createLinearGradient(x, y, width, height);
},
// createPattern
/**
* Creates a radial gradient.
* @method Phaser.BitmapData#createRadialGradient
* @param {number} x0
* @param {number} y0
* @param {number} r0
* @param {number} x1
* @param {number} y1
* @param {number} r1
* @return {CanvasGradient} The Radial Gradient.
*/
createRadialGradient: function (x0, y0, r0, x1, y1, r1) {
* @param {number} thickness - The width of the stroke.
* @param {string|number} [caps=0] - Indicates the type of caps to use at the end of lines. One of butt, round, or square. Defaults to "butt". Also accepts the values 0 (butt), 1 (round), and 2 (square) for use with he tiny API.
* @param {string|number} [joints=0] Specifies the type of joints that should be used where two lines meet. One of bevel, round, or miter. Defaults to "miter". Also accepts the values 0 (miter), 1 (round), and 2 (bevel) for use with the tiny API.
* @param {number} [miterLimit=10] - If joints is set to "miter", then you can specify a miter limit ratio which controls at what point a mitered joint will be clipped.
* @param {boolean} [ignoreScale=false] - If true, the stroke will be drawn at the specified thickness regardless of active transformations.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
setStrokeStyle: function (thickness, caps, joints, miterLimit, ignoreScale) {
if (typeof thickness === 'undefined') { thickness = 1; }
if (typeof caps === 'undefined') { caps = 'butt'; }
if (typeof joints === 'undefined') { joints = 'miter'; }
if (typeof miterLimit === 'undefined') { miterLimit = 10; }
// TODO
ignoreScale = false;
this.lineWidth(thickness);
this.lineCap(caps);
this.lineJoin(joints);
this.miterLimit(miterLimit);
return this;
},
/**
* Saves the current drawing style state using a stack so you can revert any change you make to it using restore().
* @method Phaser.BitmapData#save
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
save: function () {
this._dirty = true;
this.context.save();
return this;
},
/**
* Scales the current drawing context.
* @method Phaser.BitmapData#scale
* @param {number} x
* @param {number} y
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
scale: function (x, y) {
this._dirty = true;
this.context.scale(x, y);
return this;
},
/**
*
* @method Phaser.BitmapData#scrollPathIntoView
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
scrollPathIntoView: function () {
this._dirty = true;
this.context.scrollPathIntoView();
return this;
},
// setLineDash
// setTransform
/**
* Strokes the subpaths with the current stroke style.
* @method Phaser.BitmapData#stroke
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
stroke: function () {
this._dirty = true;
this.context.stroke();
return this;
},
/**
* Paints a rectangle which has a starting point at (x, y) and has a w width and an h height onto the canvas, using the current stroke style.
* @method Phaser.BitmapData#strokeRect
* @param {number} x - The x axis for the starting point of the rectangle.
* @param {number} y - The y axis for the starting point of the rectangle.
* @param {number} width - The rectangles width.
* @param {number} height - The rectangles height.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
strokeRect: function (x, y, width, height) {
this._dirty = true;
this.context.strokeRect(x, y, width, height);
return this;
},
/**
* Color or style to use for the lines around shapes. Default #000 (black).
* @method Phaser.BitmapData#strokeStyle
* @param {string} style - Color or style to use for the lines around shapes. Default #000 (black).
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
strokeStyle: function (style) {
this.context.strokeStyle = style;
return this;
},
// strokeText
// transform
// translate
/**
* If the game is running in WebGL this will push the texture up to the GPU if it's dirty.
* This is called automatically if the BitmapData is being used by a Sprite, otherwise you need to remember to call it in your render function.
* @method Phaser.BitmapData#render
*/
render: function () {
if (this._dirty)
{
// Only needed if running in WebGL, otherwise this array will never get cleared down
