private string sample19(ICanvasRenderingContext2D ctx)
{
ctx.fillRect(0, 0, 150, 150); // draw a rectangle with default settings
ctx.save(); // save the default state
ctx.fillStyle = "#09F"; // Make changes to the settings
ctx.fillRect(15, 15, 120, 120); // Draw a rectangle with new settings
ctx.save(); // save the current state
ctx.fillStyle = "#FFF"; // Make changes to the settings
ctx.globalAlpha = 0.5;
ctx.fillRect(30, 30, 90, 90); // Draw a rectangle with new settings
ctx.restore(); // restore previous state
ctx.fillRect(45, 45, 60, 60); // Draw a rectangle with restored settings
ctx.restore(); // restore original state
ctx.fillRect(60, 60, 30, 30); // Draw a rectangle with restored settings
return @"Originals\SaveRestore\sample19.png";
}
private string sample20(ICanvasRenderingContext2D ctx)
{
for (int i = 0; i < 3; i++)
{
for (int j = 0; j < 3; j++)
{
ctx.save();
ctx.strokeStyle = "#9CFF00";
ctx.translate(50 + j*100, 50 + i*100);
ctx.fillRect(0, 0, 20, 20);
ctx.restore();
}
}
return @"Originals\Transformations\sample20.png";
}
private string TextPositions(ICanvasRenderingContext2D ctx)
{
int i, j;
string text = "Hello world";
var align = new[] {"left", "center", "right"};
var baseline = new[] {"top", "hanging", "middle", "alphabetic", "ideographic", "bottom"};
ctx.fillStyle = "#000";
ctx.strokeStyle = "#f00";
ctx.font = "20px Arial";
ctx.translate(70, 30);
for (i = 0; i < align.Length; i++)
{
for (j = 0; j < baseline.Length; j++)
{
ctx.save();
ctx.translate(i*170 + 0.5, j*50 + 0.5);
ctx.textAlign = align[i];
ctx.textBaseLine = baseline[j];
ctx.fillText(text, 0, 0);
ctx.beginPath();
ctx.moveTo(-50, 0);
ctx.lineTo(50, 0);
ctx.moveTo(0, -10);
ctx.lineTo(0, 10);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
}
return @"Originals\Text\TextPositions.png";
}
private string sample21(ICanvasRenderingContext2D ctx)
{
ctx.translate(75, 75);
for (int i = 1; i < 6; i++)
{
// Loop through rings (from inside to out)
ctx.save();
ctx.fillStyle = "rgb(" + (51*i) + "," + (255 - 51*i) + ",255)";
for (int j = 0; j < i*6; j++)
{
// draw individual dots
ctx.rotate((float) Math.PI*2/(i*6));
ctx.beginPath();
ctx.arc(0, i*12.5F, 5, 0, Math.PI*2, true);
ctx.fill();
ctx.commit();
}
ctx.restore();
}
return @"Originals\Transformations\sample21.png";
}
private void drawStar(ICanvasRenderingContext2D ctx, int r)
{
ctx.save();
ctx.beginPath();
ctx.moveTo(r, 0);
for (int i = 0; i < 9; i++)
{
ctx.rotate(Math.PI/5);
if (i%2 == 0)
{
ctx.lineTo((r/0.525731)*0.200811, 0);
}
else
{
ctx.lineTo(r, 0);
}
}
ctx.closePath();
ctx.fill();
ctx.restore();
}
private string Clip(ICanvasRenderingContext2D ctx)
{
ctx.fillStyle = "black";
ctx.fillRect(0, 0, 150, 150);
ctx.translate(75, 75);
// Create a circular clipping path
ctx.beginPath();
ctx.arc(0, 0, 60, 0, Math.PI*2, true);
ctx.clip();
// draw background
var lingrad = (ILinearCanvasGradient) ctx.createLinearGradient(0, -75, 0, 75);
lingrad.addColorStop(0, "#232256");
lingrad.addColorStop(1, "#143778");
ctx.fillStyle = lingrad;
ctx.fillRect(-75, -75, 150, 150);
// draw stars
var r = new Random();
for (int j = 1; j < 50; j++)
{
ctx.save();
ctx.fillStyle = "#fff";
ctx.translate(75 - (int) (r.NextDouble()*150),
75 - (int) (r.NextDouble()*150));
drawStar(ctx, (int) (r.NextDouble()*4 + 2));
ctx.restore();
}
return @"Originals\Shapes\Clip.png";
}
private string sample22(ICanvasRenderingContext2D ctx)
{
ctx.fillRect(0, 0, 300, 300);
for (int i = 0; i < 3; i++)
{
for (int j = 0; j < 3; j++)
{
ctx.save();
ctx.strokeStyle = "#9CFF00";
ctx.translate(50 + j*100, 50 + i*100);
double R = 20*(j + 2.0)/(j + 1.0);
double r = -8*(i + 3.0)/(i + 1.0);
drawSpirograph(ctx, R, r, 10);
ctx.restore();
}
}
return @"Originals\Transformations\sample22.png";
}
private string sample24(ICanvasRenderingContext2D ctx)
{
ctx.strokeStyle = "#fc0";
ctx.lineWidth = 1.5;
ctx.fillRect(0, 0, 300, 300);
// Uniform scaling
ctx.save();
ctx.translate(50, 50);
drawSpirograph(ctx, 22, 6, 5); // no scaling
ctx.translate(100, 0);
ctx.scale(0.75, 0.75);
drawSpirograph(ctx, 22, 6, 5);
ctx.translate(133.333, 0);
ctx.scale(0.75, 0.75);
drawSpirograph(ctx, 22, 6, 5);
ctx.restore();
// Non-uniform scaling (y direction)
ctx.strokeStyle = "#0cf";
ctx.save();
ctx.translate(50, 150);
ctx.scale(1, 0.75);
drawSpirograph(ctx, 22, 6, 5);
ctx.translate(100, 0);
ctx.scale(1, 0.75);
drawSpirograph(ctx, 22, 6, 5);
ctx.translate(100, 0);
ctx.scale(1, 0.75);
drawSpirograph(ctx, 22, 6, 5);
ctx.restore();
// Non-uniform scaling (x direction)
ctx.strokeStyle = "#cf0";
ctx.save();
ctx.translate(50, 250);
ctx.scale(0.75, 1);
drawSpirograph(ctx, 22, 6, 5);
ctx.translate(133.333, 0);
ctx.scale(0.75, 1);
drawSpirograph(ctx, 22, 6, 5);
ctx.translate(177.777, 0);
ctx.scale(0.75, 1);
drawSpirograph(ctx, 22, 6, 5);
ctx.restore();
return @"Originals\Transformations\sample24.png";
}