System Review 2------ Game Development Skills

(1) The most basic HTML5 canvas API and its related use

related requirements

Environment requirements: Google Chrome, Firefox, Safari, Opera, or a modern browser above IE9

Programming requirements: Basic HTML and Javascript programming experience is required, and the relevant canvas programming will call the Javascript API to process

Tip: You can add width and height to the CSS file, but it is different from setting the properties of the canvas directly: using properties to define the canvas not only defines the height and width of the canvas object, but also defines the drawable graphics The height and width of the area. Using CSS to define cannot do this, only the size of the Canvas itself can be defined, so it is recommended to use attributes to set the relevant height and width

①In order to be able to call the HTML5 canvas API, we need to access the relevant context (Context) of the canvas, which is used to access the related API methods related to the HTML5 canvas

var canvas = document.getElementById('gbCanvas'),     
      context = canvas.getContext('2d'); //Use context to call more methods to draw straight lines

②Draw straight lines using HTML5 canvas

In HTML5's canvas API, we use the following methods to draw straight lines:

beginPath() - start preparing to draw

moveTo() - starting coordinates (x, y) for drawing

lineTo() - coordinates (x, y) where drawing ends

stroke() - start drawing the line immediately

【Tips】: The disadvantage is that the drawn line is black;

If you want to set the style attribute, please set it before calling the stroke() method, otherwise the set attribute will be invalid. i.e. set the thickness before drawing

③Set the style of the line

1. Thickness:

context.lineWidth = 20; //Set the line thickness to 20px

2. Color

context.strokeStyle = '#DD4814'; //Set the line thickness to 20px

3. Styles at both ends

context.lineCap = 'butt'; // draw button type
context.lineCap = 'round'; //Draw the rounded corner type
context.lineCap = 'square'; //Draw the square type

④Draw the arc

The relevant parameters are as follows:

arc( x, // define the x coordinate of the center of the circle
       y, //Define the y coordinate of the center of the circle
       radius, // radius
       startAngle, //start angle
       endAngle, //end angle
       counterClockWise //Whether it is counterclockwise
        );

⑤ Generate quadratic curve

You can use the following methods:

quadraticCurveTo(controllpointX,controllpointY(vertex coordinates),endingpointX,endingpointY(end point coordinates))

The starting point coordinates are determined by moveTo() - the starting coordinates (x, y) of the drawing

⑥ Bezier curve

Compared with the quadratic curve, the Bezier curve adds a control point to generate a more complex curve style. Other parameters are similar. The method and its parameters are described as follows:

bezierCurveTo(controllpoint1X,controllpoint1Y,controllpoint2X,controllpoint2Y,
endingpointX, endingpointY)

⑦The concept of the path of H5

Using HTML5 paths, we can connect multiple subpaths. The ending point of the previous path becomes the starting point of the next sub-path. We can use the following related methods to construct different subpaths:

lineTo，arcTo，quadraticCruveTo()，bezierCurveTo()

If you wish to start over to draw a path, use the beginPath() method

⑧Connection style

lineJoin = '...';

The corresponding values are: miter (normal), round (smooth), bevel (sharp corner)

⑨arcTo generates a rectangular rounded corner effect

arcTo(x1, y1, x2, y2, radius)

利用当前端点，端点1和端点2绘制圆角效果

⑩

System Review 2------ Game Development Skills

Guess you like