canvas description

1 // find DOM node
const Canvas = document.getElementById ( 'Canvas');
// 2, --- brush Canvas context object
const ctx = canvas.getContext ( '2d' );

// 3, set the color toner ----
ctx.fillStyle = "red"; // Set the fill color
ctx.strokeStyle = 'blue'; // outline (border) color settings

// 4, lines disposed
ctx.lineWidth = 10; // the line width set
ctx.lineCap = 'butt / round / square '; // --- line edge setting is not set, phone and circular shell, Canadian phone shell
ctx.lineJoin = 'miter / bevel / round '; // --- sharp style lines intersect, flat, round

// 5, draw a rectangle - determining region
ctx.rect (X, Y, W, H);
// ctx.fillRect (X, Y, W, H) and then without a separate color, color determination area and direct
/ / ctx.strokeRect (x, y, w , h)

// 6, draw an arc
than the angle // startAngle endAngle ---- used, with the arc
// bool false --- clockwise counterclockwise default value to false to true ---- --- optional parameters
ctx.arc (x, y, r, startAngle, endAngle [, bool])

// 7, drawing lines
ctx.moveTo (x, y); // where to start painting
ctx.lineTo (x1, y1); // draw to go there

// 8, a Bezier curve plotted
ctx.bezierCurveTo (x0, y0, cx0, cy0, x1, y1); // start point, control point, end point
ctx.quadraticCurveTo (cx1, cy1, x2, y2); / / control point, end point - on a termination point as its starting point

// 9, linear gradient
var lg = ctx.createLinearGradient (x, y , w, h) // determine the transition region
lg.addColorStop (0, "# F00");
lg.addColorStop (. 1, "# FFF");
ctx.fillStyle = lg; // --- toner is adjusted gradient
ctx.strokeStyle = lg;

// 10, the radial gradient
var ctx.createRadialGradient RG = (X0, yO, r0 of, X1, Y1, R1)
rg.addColorStop (0, "# F00");
rg.addColorStop (. 1, "# FFF");
ctx.fillStyle = rg; // --- toner is adjusted gradient
ctx.strokeStyle = rg;

// 11, an image
ctx.drawImage (img, x, y) // pictures img go into
ctx.drawImage (img, x, y, w, h) // pictures img put there, how much width and height
ctx.drawImage (img, x0, y0, fw, fh, x, y, w, h) // IMG taken, where to start, how much taken, put there, how much width and height

// 12, the start and end drawing
ctx.beginPath (); // re-start drawing --- unfinished wash brush, re-start drawing
ctx.closePath (); // End

// 13, save and restore the state
ctx.save ();
ctx.restore ();

// 14, the order of drawing of the image affects the image displayed image combination ----
ctx.globalCompositeOperation = typeo
/ **
Source-over (default): a new drawing pattern in the original
destination-over: the original pattern new drawing
source-in: display original graphics and new graphics intersection, new graphics on, so the new color graphics color
destination-in: display original graphics and new graphics intersection, the original graphics on, so color is the original color graphics
source-out: show only new pattern non-intersection portions
destination-out: show only part of the original non-graphical intersection, the intersection is partially converted to transparent --------- scratch
source -atop: display the original pattern and the intersection portion, the new graphics, the color of the intersection portion of the new color graphics
destination-atop: new graphics display and the intersection portion, the next new pattern, the color of the intersection portion of the original pattern color
lighter: the original graphics and new graphics are displayed, the intersection part of doing a color overlay
xor: overlapping part is not displayed
copy: show only new graphics
* /

// --- filling or draw a border color
ctx.fill ();
ctx.stroke ();

Draw a progress bar static arc with canvas

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <canvas id="canvas" width="500" height="500" > Your browser does not support Canvas </ Canvas> 
</ body> 
  <Script> const Canvas = document.getElementById ( ' Canvas ' )
     const ctx = canvas.getContext ( ' 2d ' ) 
    ctx.beginPath (); 
    ctx. ARC ( 100 , 100 , 50 , 0 , 2 * Math.PI, to false ); 
    ctx.lineWidth = 15 ; // draw ring 
    ctx.strokeStyle = ' Red ' ; 
    ctx.stroke (); //
    

    ctx.font = "italic 30px Microsoft elegant black";
     // ctx.fillText ( 'envelope', 120, 100) 

    // Draw ring progress 
    var startAngle = . 3 / 2 * Math.PI; // start position radians 
    var PERCENTAGE = 50 ;   // completion progress value 
    var diffAngle = PERCENTAGE / 100 * * Math.PI 2 ; // completion progress radians 
    ctx.beginPath (); 
    ctx.arc ( 100 , 100 , 50 , startAngle, diffAngle + startAngle, to false ) ; 
    ctx.strokeStyle = ' Green';
    ctx.stroke();

    // 绘制文字
    ctx.fillStyle = '#ff0';
    ctx.textAlign = 'center';
    ctx.font = '24px serif';
    ctx.fillText(percentage + '%', 100+2, 100+5);
  </script>
</html>

Guess you like