private string sample15(ICanvasRenderingContext2D ctx)
{
// Create gradients
var lingrad = (ILinearCanvasGradient) ctx.createLinearGradient(0, 0, 0, 150);
lingrad.addColorStop(0, "#00ABEB");
lingrad.addColorStop(0.5, "#fff");
lingrad.addColorStop(0.5, "#26C000");
lingrad.addColorStop(1, "#fff");
var lingrad2 = (ILinearCanvasGradient) ctx.createLinearGradient(0, 50, 0, 95);
lingrad2.addColorStop(0.5, "#000");
lingrad2.addColorStop(1, "rgba(0,0,0,0)");
ctx.fillStyle = lingrad;
ctx.fillRect(10, 10, 130, 130);
ctx.strokeStyle = lingrad2;
ctx.strokeRect(50, 50, 50, 50);
return @"Originals\Gradients\sample15.png";
}
private string sample29(ICanvasRenderingContext2D ctx)
{
// Create gradients
var lingrad = (ILinearCanvasGradient) ctx.createLinearGradient(0, 0, 0, 450);
lingrad.addColorStop(0, "#00ABEB");
lingrad.addColorStop(0.5, "#fff");
lingrad.addColorStop(0.5, "#26C000");
lingrad.addColorStop(1, "#fff");
var lingrad2 = (ILinearCanvasGradient) ctx.createLinearGradient(150, 175, 220, 200);
lingrad2.addColorStop(0.5, "#000");
lingrad2.addColorStop(0.7, "red");
lingrad2.addColorStop(1, "rgba(0,0,0,0)");
// assign gradient to fill
ctx.fillStyle = lingrad;
// draw shape
ctx.fillRect(0, 0, 390, 390);
// assign gradient to stroke
ctx.strokeStyle = lingrad2;
// draw shape
ctx.strokeRect(100, 100, 150, 150);
return @"Originals\Gradients\sample29.png";
}
private string sample32(ICanvasRenderingContext2D ctx)
{
var lingrad2 = (ILinearCanvasGradient) ctx.createLinearGradient(50, 50, 100, 100);
lingrad2.addColorStop(0.5, "#000");
lingrad2.addColorStop(0.7, "red");
lingrad2.addColorStop(1, "rgba(0,0,0,0)");
ctx.strokeStyle = lingrad2;
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI*2, true); // Outer circle
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI*2, true); // Left eye
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI*2, true); // Right eye
//50, 50, 100, 100
ctx.stroke();
return @"Originals\Gradients\sample32.png";
}
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";
}