My project 2 uses Canvas to write some images

My project 2 uses Canvas to write some images

In the project, you need to use Canvas to draw some images and share them with you.

Since these images need to be used frequently, they are encapsulated into one method. Here we will share with you these methods!

Some variables used (some variables may not be written, so let's make up for them ):
lineWidth="1";
color="blue";
strokeStyle="red";
fillStyle="blue";
// Draw the horizontal line function drawhengxian (startPoint, l, color) {context. beginPath (); context. moveTo (startPoint. x, startPoint. y); context. lineTo (startPoint. x + l, startPoint. y); context. lineWidth = lineWidth; context. strokeStyle = color; context. stroke ();}
// Draw the line function drawZheXian (points) {// draw the discounted context. beginPath (); context. moveTo (points [0]. x, points [0]. y); for (var I = 1; I <points. length; I ++) {context. lineTo (points [I]. x, points [I]. y);} context. lineWidth = lineWidth; context. strokeStyle = strokeStyle; context. stroke () ;}// draw the vertical bar function drawshuxian (starPoint, l) {context. beginPath (); context. moveTo (starPoint. x, starPoint. y); context. lineTo (starPoint. x, starPoint. y-l); context. lineWidth = lineWidth; context. strokeStyle = strokeStyle; context. stroke () ;}// draw the hollow circle function drawEmptyArc (center, radius) {context. beginPath (); context. arc (center. x, center. y, radius, 0, 2 * Math. PI, false); context. fillStyle = fillStyle; context. fill (); context. lineWidth = lineWidth; context. strokeStyle = strokeStyle; context. stroke () ;}// draw a solid triangle (that is, a colored triangle) function drawshendanshu (points, colors) {// draw a discounted context. beginPath (); context. moveTo (points [0]. x, points [0]. y); for (var I = 1; I <points. length; I ++) {context. lineTo (points [I]. x, points [I]. y);} // end the painting context. closePath (); // plot the context. fillStyle = colors; // fill path context. fill ();} // draw the snowflake Pattern function drawCha (center, l) {context. beginPath (); context. moveTo (center. x-l, center. y-l); context. lineTo (center. x + l, center. y + l); context. moveTo (center. x-l * 1.414, center. y); context. lineTo (center. x + l * 1.414, center. y); context. moveTo (center. x-l, center. y + l); context. lineTo (center. x + l, center. y-l); context. lineWidth = lineWidth; context. strokeStyle = strokeStyle; context. stroke () ;}// draw power (that is, three vertical bars of different lengths) function drawsanshuxian (center, l, isAnode) {context. beginPath (); if (isAnode) {context. moveTo (center. x-l, center. y-l * 3); context. lineTo (center. x-l, center. y + l * 3); context. moveTo (center. x, center. y-l * 2); context. lineTo (center. x, center. y + l * 2); context. moveTo (center. x + l, center. y + l); context. lineTo (center. x + l, center. y-l);} else {context. moveTo (center. x-l, center. y + l); context. lineTo (center. x-l, center. y-l); context. moveTo (center. x, center. y-l * 2); context. lineTo (center. x, center. y + l * 2); context. moveTo (center. x + l, center. y-l * 3); context. lineTo (center. x + l, center. y + l * 3);} context. lineWidth = lineWidth; context. strokeStyle = strokeStyle; context. stroke () ;}// draw two semi-circular functions drawBanYuan2 (center, l, isUp) {var radius = l/4.0; var I; for (I = 0; I <2; I ++) {context. beginPath (); if (I = 0) {context. arc (center. x + radius, center. y, radius, 0, Math. PI, isUp);} else {context. arc (center. x + 3 * radius, center. y, radius, 0, Math. PI, isUp);} context. lineWidth = lineWidth; context. strokeStyle = strokeStyle; context. stroke () ;}// resistance line (composed of many small and semi-circles, you can try) function drawXianQuan (startPoint, l ){
Var r = l/5; var potions1 = []; for (var I = 0; I <5; I ++) {var px = startPoint. x + I * r; var py = startPoint. y; potions1.push ({x: px, y: py});} var potions2 = []; for (var I = 0; I <5; I ++) {var px = startPoint. x + I * r; var py = startPoint. y + l/3; potions2.push ({x: px, y: py});} context. beginPath (); context. moveTo (startPoint. x, startPoint. y + l/6); context. lineTo (startPoint. x + l, startPoint. y + l/6); context. lineWidth = lineWidth; context. strokeStyle = strokeStyle; context. stroke (); var radius = l/10; for (var I = 0; I <potions1.length; I ++) {context. beginPath (); var isTop; if (I % 2 = 0) {isTop = true;} else {isTop = false;} context. arc (potions1 [I]. x + radius, potions1 [I]. y, radius, 0, Math. PI, isTop); context. lineWidth = lineWidth; context. strokeStyle = strokeStyle; context. stroke () ;}for (var I = 0; I <potions2.length; I ++) {context. beginPath (); var isTop; if (I % 2 = 0) {isTop = true;} else {isTop = false;} context. arc (potions2 [I]. x + radius, potions2 [I]. y, radius, 0, Math. PI, isTop); context. lineWidth = lineWidth; context. strokeStyle = strokeStyle; context. stroke () ;}}// draw the solid circle function drawFillArc (center, radius) {context. beginPath (); context. arc (center. x, center. y, radius, 0, 2 * Math. PI, false); context. fillStyle = "black"; context. fill ();} // draw the rectangular function drawFillRect (x, y, a, B) {var c = document. getElementById ("myCanvas"); var cxt = c. getContext ("2d"); cxt. strokeRect (x, y, a, B );}