private string sample12(ICanvasRenderingContext2D ctx) { var lineCap = new[] {"butt", "round", "square"}; // Draw guides ctx.strokeStyle = "#09f"; ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(140, 10); ctx.moveTo(10, 140); ctx.lineTo(140, 140); ctx.stroke(); // Draw lines ctx.strokeStyle = "black"; for (int i = 0; i < lineCap.Length; i++) { ctx.lineWidth = 15; ctx.lineCap = lineCap[i]; ctx.beginPath(); ctx.moveTo(25 + i*50, 10); ctx.lineTo(25 + i*50, 140); ctx.stroke(); } return @"Originals\Lines\sample12.png"; }
private void roundedRect(ICanvasRenderingContext2D ctx, double x, double y, double width, double height, double radius) { ctx.beginPath(); ctx.moveTo(x, y + radius); ctx.lineTo(x, y + height - radius); ctx.quadraticCurveTo(x, y + height, x + radius, y + height); ctx.lineTo(x + width - radius, y + height); ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius); ctx.lineTo(x + width, y + radius); ctx.quadraticCurveTo(x + width, y, x + width - radius, y); ctx.lineTo(x + radius, y); ctx.quadraticCurveTo(x, y, x, y + radius); ctx.stroke(); }
private string Fill(ICanvasRenderingContext2D ctx) { ctx.fillStyle = "#0f0"; ctx.strokeStyle = "#0f0"; ctx.shadowColor = "#00f"; ctx.shadowOffsetX = 32; ctx.shadowOffsetY = 16; ctx.shadowBlur = 8; ctx.moveTo(32, 32); ctx.lineTo(128, 128); ctx.lineTo(128, 32); ctx.lineTo(32, 128); ctx.fill(); return @"Originals\Shadows\Fill.png"; }
private string sample13(ICanvasRenderingContext2D ctx) { var lineJoin = new[] {"round", "bevel", "miter"}; ctx.lineWidth = 10; for (int i = 0; i < lineJoin.Length; i++) { ctx.lineJoin = lineJoin[i]; ctx.beginPath(); ctx.moveTo(-5, 5 + i*40); ctx.lineTo(35, 45 + i*40); ctx.lineTo(75, 5 + i*40); ctx.lineTo(115, 45 + i*40); ctx.lineTo(155, 5 + i*40); ctx.stroke(); } return @"Originals\Lines\sample13.png"; }
private string sample11(ICanvasRenderingContext2D ctx) { for (int i = 0; i < 10; i++) { ctx.beginPath(); ctx.lineWidth = 1 + i; ctx.moveTo(5 + i*14, 5); ctx.lineTo(5 + i*14, 140); ctx.stroke(); } return @"Originals\Lines\sample11.png"; }
private void grid(ICanvasRenderingContext2D ctx, int w, int h, int size, int unit, string color, string color2) { int x, y, i, j; for (i = 0, x = size; x < w; ++i, x += size) { ctx.beginPath(); ctx.strokeStyle = (i%unit != 0) ? color : color2; ctx.moveTo(x, 0); ctx.lineTo(x, h); ctx.stroke(); ctx.closePath(); } for (j = 0, y = size; y < h; ++j, y += size) { ctx.beginPath(); ctx.strokeStyle = (j%unit != 0) ? color : color2; ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke(); ctx.closePath(); } }
private string ArcTo01(ICanvasRenderingContext2D ctx) { int x0 = 200, x1 = 250, x2 = 150, x3 = 200, y = 10, y3 = 80; double y2 = 0.1; int r = 10; disc(ctx, x0, y, 4, "red"); disc(ctx, x1, y, 4, "red"); disc(ctx, x2, y + y2, 4, "red"); disc(ctx, x3, y3, 4, "green"); line(ctx, x0, y, x1, y, 1, "blue"); line(ctx, x1, y, x2, y + y2, 1, "blue"); ctx.lineWidth = 2; ctx.strokeStyle = "black"; ctx.beginPath(); ctx.moveTo(x0, y); ctx.arcTo(x1, y, x2, y + y2, r); ctx.lineTo(x3, y3); ctx.stroke(); return @"Originals\Shapes\ArcTo01.png"; }
private void drawSpirograph(ICanvasRenderingContext2D ctx, double R, double r, double O) { double x1 = R - O; double y1 = 0; int i = 1; double x2, y2; ctx.beginPath(); ctx.moveTo(x1, y1); do { if (i > 20000) break; double angle = i*Math.PI/72; x2 = (R + r)*Math.Cos(angle) - (r + O)*Math.Cos(((R + r)/r)*angle); y2 = (R + r)*Math.Sin(angle) - (r + O)*Math.Sin(((R + r)/r)*angle); ctx.lineTo(x2, y2); x1 = x2; y1 = y2; i++; } while (x2 != R - O && y2 != 0); ctx.stroke(); }
private string sample5(ICanvasRenderingContext2D ctx) { var img = new ImageData(); img.src = @"backdrop.png"; ctx.drawImage(img, 0, 0, 0, 0); ctx.beginPath(); ctx.moveTo(30, 96); ctx.lineTo(70, 66); ctx.lineTo(103, 76); ctx.lineTo(170, 15); ctx.stroke(); return @"Originals\Images\sample5.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 void line(ICanvasRenderingContext2D ctx, double x0, double y0, double x1, double y1, double w, string col) { ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x1, y1); ctx.lineWidth = w; ctx.strokeStyle = col; ctx.stroke(); }
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 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 sample27(ICanvasRenderingContext2D ctx) { ctx.strokeStyle = "black"; ctx.beginPath(); ctx.rect(0, 0, 100, 100); ctx.stroke(); ctx.strokeStyle = "#fc0"; ctx.moveTo(0, 0); ctx.translate(100.0, 0.0); ctx.lineTo(0, 0); ctx.translate(0, 100); ctx.lineTo(0, 0); ctx.translate(-100, 0); ctx.lineTo(0, 0); ctx.stroke(); return @"Originals\Transformations\sample27.png"; }
private string sample14(ICanvasRenderingContext2D ctx) { // Clear canvas ctx.clearRect(-5, 0, 250, 250); // Draw guides ctx.strokeStyle = "#09f"; ctx.lineWidth = 2; ctx.strokeRect(-5, 50, 160, 50); // Set line styles ctx.strokeStyle = "#000"; ctx.lineWidth = 10; // check input ctx.miterLimit = 10; ctx.lineJoin = "miter"; // Draw lines ctx.beginPath(); //ctx.moveTo(0, 0); ctx.moveTo(0, 100); for (int i = 0; i < 24; i++) { int dy = i%2 == 0 ? 25 : -25; ctx.lineTo(Math.Pow(i, 1.5)*2, 75 + dy); } ctx.stroke(); return @"Originals\Lines\sample14.png"; }