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"; }