Book to back

The picture

Drawing everything manually is still a bit of a hassle, but canvas supports importing images, createPattern(Image, type), which takes two arguments. Image can be a reference to an Image object, or another Canvas object. Type must be one of the following string values: repeat, repeat-x, repeat-y, and no-repeat.

Here is an example of my gold digger’s head. Note that I need to wait for the image to load before rendering

// Create a new image object to use as a pattern
var img = new Image();
img.src = 'https://sf6-ttcdn-tos.pstatp.com/img/user-avatar/01434b575492b00010706d94d5b975aa~300x300.image';
img.onload = function() {

  // Create a pattern
  var p = ctx.createPattern(img, 'no-repeat');
  ctx.fillStyle = p;
  ctx.fillRect(0.0.150.150);
}
Copy the code

The text

Canvas provides two methods for rendering text:

  • fillText(text, x, y [, maxWidth])Fills the specified text at the specified (x,y) position. The maximum width to draw is optional.
  • strokeText(text, x, y [, maxWidth])Draws a text border at the specified (x,y) position. The maximum width drawn is optional.

Stroke and fill are the strokes and fills we used earlier

Text can be set font and other styles

  • font = valueThe style we are currently using to draw text. This string uses andCSS fontProperty the same syntax. The default font is10px sans-serif.
  • textAlign = valueText alignment options. Optional values include:start.end.left.right or center. The default value isstart.
  • textBaseline = valueBaseline alignment options. Optional values include:top.hanging.middle.alphabetic.ideographic.bottom. The default value is’ alphabetic. ` `
  • “direction = valueText direction. Possible values include:ltr.rtl.inherit. The default value isInherit. `

These are basically the same styles as CSS

Move and zoom

Since canvas is designed to solve the problem of dynamic pictures, moving and zooming can be said to be the foundation of animation

Translate (x, y), where x and y are the offset of the x and y axes, respectively.

The rotate uses the rotate(Angle), which takes an Angle argument clockwise and defaults to (0,0) unless we move it with translate(e.g. Ctx.translate (10, 10));

Scale (x, y), x and y are the appropriate proportions of X-axis and Y-axis respectively, 1 is unchanged, <1 is reduced, and vice versa; If there is a negative number, it is mirrored on the axis

If you’re familiar with CSS transform, it should be pretty easy here, they’re pretty similar.

The mask

As for the mask content, put a document here, it is too difficult to say, if you have used PhotoShop, you will probably understand

animation

There are three methods you can use for animation: setTimeout, setInterval, and requestAnimationFrame. The first two are the ones you’re familiar with. RequestAnimationFrame tells the browser that you want to execute an animation and, before redrawing, Ask the browser to perform a specific function to update the animation.

The general process of animation is as follows:

  • There are many methods you can use to clear the previous frame. The simplest is to clear the rectangle, which is the length and width of the canvas
  • Save canvas state (style, distortion, etc.),ctx.save()
  • Drawing graphics
  • Restore canvas state,ctx.restore()

Let’s do a little example here, rectangle drop

ctx.beginPath();
let h = 0
function down() {
  h += 1
  ctx.clearRect(0.0, canvas.width, canvas.height);
  ctx.fillRect(0, h, 100.100)
  window.requestAnimationFrame(down)
}
down()
Copy the code

Results the following

So about canvas API we have almost understood, next section, we will implement a backgammon game

This article is part of the “Gold Nuggets For Free!” Event, click to view details of the event