Use Html5 to draw lanterns and use html5 to draw lanterns

Use Html5 to draw lanterns and use html5 to draw lanterns

Recently I was studying Html5. I used JavaScript to draw a lantern on Canvas and gave a brief description.

The specific drawing method is described on the page. The Code is as follows:

1 <script type = "text/javascript"> 2 // draw an elliptical 3 function ParamEllipse (context, x, y, a, B) {4 // max is equal to 1 divided by the greater of the long axis values a and B. 5 // each cycle of I increases by 1/max, increase the degree by 6 // so that the path (ARC) drawn by each cycle is close to 1 pixel 7 var step = (a> B )? 1/a: 1/B; 8 context. fillStyle = "# ff0000"; 9 context. beginPath (); 10 context. moveTo (x + a, y); // draw 11 for (var I = 0; I <2 * Math. PI; I + = step) {12 // The parameter equation is x = a * cos (I), y = B * sin (I), and 13 // The parameter is I, indicates the level (radian) 14 context. lineTo (x + a * Math. cos (I), y + B * Math. sin (I); 15} 16 context. closePath (); 17 context. stroke (); 18 context. fill (); 19 context. closePath (); 20}; 21 22 // draw the rectangle 23 function FillRect (context, x, y, w, h, flag) {24 var grd = context. createLinearGradient (x + w/2, y, x + w/2, y + h); 25 if (flag) {26 grd. addColorStop (0, "yellow"); 27 grd. addColorStop (1, "red"); 28} else {29 grd. addColorStop (0, "red"); 30 grd. addColorStop (1, "yellow"); 31} 32 context. fillStyle = grd; 33 context. fillRect (x, y, w, h); 34} 35 36 // draw line 37 function SetLine (ctx, x, y, x1, y1) {38 ctx. beginPath (); 39 ctx. strokeStyle = "yellow"; 40 ctx. moveTo (x, y); 41 ctx. lineTo (x1, y1); 42 ctx. stroke (); 43 ctx. closePath (); 44} 45 window. onload = function () {46 var c = document. getElementById ("myCanvas"); 47 var ctx = c. getContext ("2d"); 48 var startX = 150; // Center Coordinate x49 var startY = 300; // Center Coordinate y50 var pWidth = 120; // oval long axis 51 var pHeigth = 80; // oval short axis 52 var fWidth = 120; // rectangular width 53 var fheight = 40; // rectangle height 54 // draw an elliptic 55 ParamEllipse (ctx, startX, startY, pWidth, pHeigth); 56 // draw a rectangle above and below the elliptic, and half of the height overlaps with the elliptic 57 FillRect (ctx, startX-fWidth/2, startY-pHeigth-(fheight/2), fWidth, fheight, true ); 58 FillRect (ctx, startX-fWidth/2, startY + pHeigth-(fheight/2), fWidth, fheight, false); 59 // draw lines below the rectangle, 8 lines in one unit, with a length of 40 and a uniform distribution below the rectangle 60 var lLen = fheight; // The linear range is always under the rectangle 61 var lInterval = 8; // interval between line and line 62 for (var I = 0; I <(fWidth/8) + 1; I ++) {63 SetLine (ctx, startX-fWidth/2 + I * lInterval, startY + pHeigth + fheight/2, startX-fWidth/2 + I * lInterval, startY + pHeigth + fheight/2 + lLen ); 64} 65 // disassemble the three parts. 66 // 1. upper rectangle 67 var right = 380; 68 FillRect (ctx, startX-fWidth/2 + right, startY-pHeigth-(fheight/2)-150, fWidth, fheight, true ); 69 // 2. center oval 70 ParamEllipse (ctx, startX + right, startY-50, pWidth, pHeigth); 71 // 3. bottom rectangle 72 FillRect (ctx, startX-fWidth/2 + right, startY + pHeigth-(fheight/2) + 50, fWidth, fheight, false); 73 // 4. deprecate 74 for (var I = 0; I <(fWidth/8) + 1; I ++) {75 SetLine (ctx, startX-fWidth/2 + I * lInterval + right, startY + pHeigth + fheight/2 + 100, startX-fWidth/2 + I * lInterval + right, startY + pHeigth + fheight/2 + lLen + 100); 76} 77 // draw a line and connect it to 78 var lsX = startX + pWidth + 20; 79 var lsY = startY; 80 var leX = startX + pWidth + 20 + 100; 81 var leY = startY; 82 SetLine (ctx, lsX, startY-30, leX-30, leY-150 ); 83 SetLine (ctx, lsX, startY-15, leX, leY-50); 84 SetLine (ctx, lsX, startY + 15, leX, leY + 100 ); 85 SetLine (ctx, lsX, startY + 30, leX-30, leY + 150); 86 87 // mark 88 ctx on the left. font = "35px Arial"; 89 var t = "Lantern composition --"; 90 ctx. fillText (t, 50, 50); 91} 92 93 </script>

View Code