|
| 1 | +let cx = document.querySelector('canvas').getContext('2d'); |
| 2 | + |
| 3 | +function trapezoid(x, y) { |
| 4 | + cx.beginPath(); |
| 5 | + cx.moveTo(x, y); |
| 6 | + cx.lineTo(x + 50, y); |
| 7 | + cx.lineTo(x + 70, y + 50); |
| 8 | + cx.lineTo(x - 20, y + 50); |
| 9 | + cx.closePath(); |
| 10 | + cx.stroke(); |
| 11 | +} |
| 12 | +trapezoid(30, 30); |
| 13 | + |
| 14 | +function diamond(x, y) { |
| 15 | + cx.translate(x + 30, y + 30); |
| 16 | + cx.rotate(Math.PI / 4); |
| 17 | + cx.fillStyle = 'red'; |
| 18 | + cx.fillRect(-30, -30, 60, 60); |
| 19 | + cx.resetTransform(); |
| 20 | +} |
| 21 | +diamond(140, 30); |
| 22 | + |
| 23 | +function zigzag(x, y) { |
| 24 | + cx.beginPath(); |
| 25 | + cx.moveTo(x, y); |
| 26 | + for (let i = 0; i < 8; i++) { |
| 27 | + cx.lineTo(x + 80, y + i * 8 + 4); |
| 28 | + cx.lineTo(x, y + i * 8 + 8); |
| 29 | + } |
| 30 | + cx.stroke(); |
| 31 | +} |
| 32 | +zigzag(240, 30); |
| 33 | + |
| 34 | +function spiral(x, y) { |
| 35 | + let radius = 50, |
| 36 | + xCenter = x + radius, |
| 37 | + yCenter = y + radius; |
| 38 | + cx.beginPath(); |
| 39 | + cx.moveTo(xCenter, yCenter); |
| 40 | + for (let i = 0; i < 300; i++) { |
| 41 | + let angle = (i * Math.PI) / 30; |
| 42 | + let dist = (radius * i) / 300; |
| 43 | + cx.lineTo(xCenter + Math.cos(angle) * dist, yCenter + Math.sin(angle) * dist); |
| 44 | + } |
| 45 | + cx.stroke(); |
| 46 | +} |
| 47 | +spiral(340, 20); |
| 48 | + |
| 49 | +function star(x, y) { |
| 50 | + let radius = 50, |
| 51 | + xCenter = x + radius, |
| 52 | + yCenter = y + radius; |
| 53 | + cx.beginPath(); |
| 54 | + cx.moveTo(xCenter + radius, yCenter); |
| 55 | + for (let i = 1; i <= 8; i++) { |
| 56 | + let angle = (i * Math.PI) / 4; |
| 57 | + cx.quadraticCurveTo( |
| 58 | + xCenter, |
| 59 | + yCenter, |
| 60 | + xCenter + Math.cos(angle) * radius, |
| 61 | + yCenter + Math.sin(angle) * radius |
| 62 | + ); |
| 63 | + } |
| 64 | + cx.fillStyle = 'gold'; |
| 65 | + cx.fill(); |
| 66 | +} |
| 67 | +star(460, 20); |
0 commit comments