private string sample8(ICanvasRenderingContext2D ctx) { for (int i = 0; i < 6; i++) { for (int j = 0; j < 6; j++) { ctx.strokeStyle = "rgb(0," + Math.Floor(255 - 42.5*i) + ',' + Math.Floor(255 - 42.5*j) + ')'; ctx.beginPath(); ctx.arc(12.5F + j*25, 12.5F + i*25, 10, 0, Math.PI*2, true); ctx.stroke(); } } return @"Originals\Styles\sample8.png"; }
private string Composite(ICanvasRenderingContext2D ctx, string compositeType) { // draw rectangle ctx.fillStyle = "#09f"; ctx.fillRect(15, 15, 70, 70); // set composite property ctx.globalCompositeOperation = compositeType; // draw circle ctx.fillStyle = "#f30"; ctx.beginPath(); ctx.arc(75, 75, 35, 0, Math.PI*2, true); ctx.fill(); ctx.commit(); return @"Originals\Compositions\" + compositeType + ".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 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 sample9(ICanvasRenderingContext2D ctx) { // draw background ctx.fillStyle = "#FD0"; ctx.fillRect(0, 0, 75, 75); ctx.fillStyle = "#6C0"; ctx.fillRect(75, 0, 75, 75); ctx.fillStyle = "#09F"; ctx.fillRect(0, 75, 75, 75); ctx.fillStyle = "#F30"; ctx.fillRect(75, 75, 75, 75); ctx.fillStyle = "#FFF"; // set transparency value ctx.globalAlpha = 0.2F; // Draw semi transparent circles for (int i = 0; i < 7; i++) { ctx.beginPath(); ctx.arc(75, 75, 10 + 10*i, 0, Math.PI*2, true); ctx.fill(); } return @"Originals\Styles\sample9.png"; }
private string sample26(ICanvasRenderingContext2D ctx) { // Draw shapes roundedRect(ctx, 12, 12, 150, 150, 15); roundedRect(ctx, 19, 19, 150, 150, 9); roundedRect(ctx, 53, 53, 49, 33, 10); roundedRect(ctx, 53, 119, 49, 16, 6); roundedRect(ctx, 135, 53, 49, 33, 10); roundedRect(ctx, 135, 119, 25, 49, 10); // Character 1 ctx.beginPath(); ctx.arc(37, 37, 13, Math.PI/7.0, -Math.PI/7.0, false); ctx.lineTo(34, 37); ctx.fill(); // blocks for (int i = 0; i < 8; i++) { ctx.fillRect(51 + i*16, 35, 4, 4); } for (int i = 0; i < 6; i++) { ctx.fillRect(115, 51 + i*16, 4, 4); } for (int i = 0; i < 8; i++) { ctx.fillRect(51 + i*16, 99, 4, 4); } // character 2 ctx.beginPath(); ctx.moveTo(83, 116); ctx.lineTo(83, 102); ctx.bezierCurveTo(83, 94, 89, 88, 97, 88); ctx.bezierCurveTo(105, 88, 111, 94, 111, 102); ctx.lineTo(111, 116); ctx.lineTo(106.333, 111.333); ctx.lineTo(101.666, 116); ctx.lineTo(97, 111.333); ctx.lineTo(92.333, 116); ctx.lineTo(87.666, 111.333); ctx.lineTo(83, 116); ctx.fill(); ctx.fillStyle = "white"; ctx.beginPath(); ctx.moveTo(91, 96); ctx.bezierCurveTo(88, 96, 87, 99, 87, 101); ctx.bezierCurveTo(87, 103, 88, 106, 91, 106); ctx.bezierCurveTo(94, 106, 95, 103, 95, 101); ctx.bezierCurveTo(95, 99, 94, 96, 91, 96); ctx.moveTo(103, 96); ctx.bezierCurveTo(100, 96, 99, 99, 99, 101); ctx.bezierCurveTo(99, 103, 100, 106, 103, 106); ctx.bezierCurveTo(106, 106, 107, 103, 107, 101); ctx.bezierCurveTo(107, 99, 106, 96, 103, 96); ctx.fill(); ctx.fillStyle = "black"; ctx.beginPath(); ctx.arc(101, 102, 2, 0, Math.PI*2, true); ctx.fill(); ctx.beginPath(); ctx.arc(89, 102, 2, 0, Math.PI*2, true); ctx.fill(); return @"Originals\Curves\sample26.png"; }
private string sample3(ICanvasRenderingContext2D ctx) { 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 ctx.stroke(); return @"Originals\Shapes\sample3.png"; }
private void disc(ICanvasRenderingContext2D ctx, double x, double y, double r, string col) { ctx.beginPath(); ctx.moveTo(x, y); ctx.arc(x, y, r, 0, 2*Math.PI, false); ctx.fillStyle = col; ctx.fill(); }
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"; }