1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>05-Canvas简单图形</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 canvas{ 12 the display : Block ; 13 is margin : 0 Auto ; 14 background : Red ; 15 } 16 </ style > . 17 </ head > 18 is < body > . 19 < Canvas width = "500" height = "500" > </ Canvas > 20 is < Script > 21 is / * 22 is 1.closePath 23 is automatically created from the current point back to the starting point of the path 24 25 2.lineJoin 26 is provided intersecting line patterns are miter inflection point (the default), round, Bevel 27 * * / 28 the let oCanvas = document.querySelector ( " Canvas " ); 29 the let oCtx = oCanvas.getContext ( " 2D " ); 30 oCtx.moveTo ( 50 , 50 ); 31 is oCtx.lineTo ( 200 is , 50 ); 32 oCtx.lineTo ( 200 is , 200 is ); 33 is // Note: If the pattern is closed by lineTo, it is not well closed 34 is // oCtx.lineTo (50, 50); 35 oCtx.closePath (); 36 oCtx.lineWidth = 20 is ; 37 [ // oCtx.lineJoin = "round"; 38 is oCtx.lineJoin = " Bevel " ; 39 // oCtx = .lineJoin "are miter"; 40 // NOTE point: default does not automatically connect from the last point to the starting point 41 is oCtx.stroke (); 42 is </ Script > 43 is </ body > 44 is </ HTML >
05-canvas draw simple shapes of triangles
Guess you like
Origin www.cnblogs.com/gsq1998/p/12166037.html
Recommended
Ranking