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