1. Definition and grammar

The canvas element added in H5 is used to implement arbitrary drawing operations in web pages. Canvas defaults to a 300 * 150 inline-block

  • eachcanvasElement with one and only one “brush” object -> Drawing context object
<canvas id="canvasTest" width="500" height="400">Your browser does not support the Canvas tag</canvas>
Copy the code

2. Canvas basic method

  • var ctx = canvasTest.getContext('2d'): Gets the brush object on the canvas
  • console.dir(ctx): View the properties and method members of the brush object
  • ctx.fillStyle='#f00': Fill the painting with colors, gradients or patterns
  • ctx.strokeStyle='#000': Fill the color, gradient or pattern of the stroke
  • ctx.lineWidth = 1: Width of stroke/line
  • ctx.clearRect(x, y, w, h): Clears all the contents of a canvas
2.1. How to set the size of canvas
  • canvasCanvas size if usedcssSpecifies that the actual size is not changed, but is “stretched” ->canvasSize not availablecssThe specified
    • You can useHTMLElement’s attribute /JSObject property to specify
2.2. Canvas Drawing Fill Gradient/Canvas Drawing Stroke gradient
<canvas id="canvasTest" width="500" height="400">Your browser does not support the Canvas tag</canvas>
<script type="text/javascript">
    let canvasTest = document.getElementById('canvasTest')
    let ctx = canvasTest.getContext('2d')
    let g = ctx.createLinearGradient(x1, y1, x2, y2) CreateRadialGradient (x1, y1, R1, x2, y2, R2)
    g.addColorStop(offset, color) // offset: a floating point value that sets the position of the color (0.0 indicates the origin of the canvas and 1.0 indicates the destination of the canvas) color: Sets the gradient color
    g.addColorStop(offset1, color1) // Radial gradient is the same as linear gradient
    ctx.fillStyle = g // Use the gradient as a fill
    ctx.strokeStyle = g // Use the gradient as a stroke
    ctx.fillRect(x, y, w, h) // Fill the rectangle with gradient
    ctx.strokeRect(x, y, w, h) Stroke a rectangle with gradient
</script>
Copy the code

3. Use the Canvas brush to draw a rectangle

  • The rectangle registration point is at the top left corner: the coordinates of the top left corner are 0, 0
  • ctx.fillRect(x, y, w, h): Fills a rectangle
  • ctx.strokeRect(x, y, w, h): Stroke a rectangle
3.1. Canvas drawing realizes animation
  • Principle: Use periodic timer to perform “clear canvas contents and redraw contents”

4. Use canvas to draw text

  • canvasDraw the text anchor point (0, 0) at the beginning of the text baseline
  • ctx.font = '10px sans-serif': Sets the text size and font
  • ctx.textBaseline = 'alphabetic': Sets the text baseline. The value can be:top / bottom / middle / alphabetic
  • ctx.fillText(txt, x, y): Fill text
  • ctx.strokeText(txt, x, y): Stroke text
  • ctx.measureText(txt).width: Measures the specified text width based on the currently specified size and font

5. Use canvas to draw a path

  • path: path, similar toPhotoshopIn the pen tool, the path itself is not visible, can be used for: stroke, fill, selection clipping
  • ctx.beginPath(): Starts to draw a new path
  • ctx.clostPath(): Closed path
  • ctx.moveTo(x, y): Move to a certain point
  • ctx.lineTo(x, y): Draws a line from the current point to a specified point
  • ctx.arc(cx, cy, r, start, end): Draws a circle/arc path
  • ctx.ellipse(cx, cy, rx, ry, start, end): Draws an elliptical path
  • ctx.bezierCurveTo(): Draws the Bezier curve path
  • ctx.stroke(): Stroke using the current path
  • ctx.fill(): Fills with the current path
  • ctx.clip(): Clipping using the current path

6. Use Canvas to draw images

  • When drawing an image, the client must wait for the image to finish loading asynchronously
<canvas id="canvasTest" width="500" height="400">Your browser does not support Canvas</canvas>
<script type="text/javascript">
    let canvasTest = document.getElementById('canvasTest')
    let ctx = canvasTest.getContext('2d')
    let img = new Image()
    img.src = 'xxx.png' // The client automatically downloads the image asynchronously
    console.log(img.width) / / 0
    // Image loading completed event
    img.onload = function () {
      console.log(img.width) / / a value
      ctx.drawImage(img, x, y) // Full size drawing
      ctx.drawImage(img, x, y, w, h) // Zoom drawing
    }
</script>
Copy the code