HTML5 Canvas Core technology-graphics, animation and game development. PDF2

Event handling:

The HTML5 application is driven by events and an event listener can be added to the canvas, which is invoked by the browser when the event occurs.

Method One
Canvas.onmousedown=function (e) {
Some code
};

Method Two
Canvas.addeventlistener (' MouseDown ', function (e) {
Some code
})

Introduction to Basic mathematical knowledge:

Algebraic equations: (10x+5) x2=110

Trigonometric functions: 180° equals π radians

Sine, cosine, tangent:

Sin (α) on edge/hypotenuse

Cos (alpha) ortho/hypotenuse

Tan (α) on edge/adjacent edge

Vector operations: size and direction

The Pythagorean theorem, the hypotenuse of any right triangle, equals the square root of the squared sum of the other sides.

A vector of length one unit (that is, modulo 1), called the unit vector

The addition and subtraction of vectors

dot product of a vector (used to determine the direction of movement after an object collision)

A frame is a static picture, and a continuous frame forms an animation.

Chapter II Drawing

Coordinate system: By default, the coordinates of the canvas are the origin in the upper-left corner of the canvas, the x-coordinate grows to the right, and the y-coordinate extends downward

Rectangle drawing: The canvas API provides three ways to clear, stroke, and fill a rectangle, respectively

Clearrect (double x,double y,double w,double h) (upper-left corner x, y coordinates, width and height of rectangle)

Strokerect (double x,double y,double w,double h)

FillRect (double x,double y,double w,double h)

Color and transparency:

You can use the Strokestyle and FillStyle properties of the drawing environment to set

context.strokestyle= ' Red ';

Context.fillstyle= ' Rgba (0,0,255,0.5) ';

The color of HSL format is more intuitive than RBG, RGB is hardware-oriented (cathode ray tube), HSL three components are hue, saturation, brightness

Gradient and pattern:

In addition to color values, Strokestyle and FillStyle also support gradients and patterns

Linear (linear gradient) and radial (radial gradient)

Createlineargradient () method to create a linear gradient, you need to pass the method two points of x, y coordinates (total 4), the line between two points is the canvas to establish the color gradient effect of the basis, call Createlineargradient () method returns an Canvasgradient instance as the value of the FillStyle

Context.fillstyle=gradient;

Canvasgradient has a unique way of addcolorstop (), adding 5 "color stops" to the gradient, receiving two parameters, a double value between 0~1.0, representing the position of the color stop on the gradient line, The other is the CSS3 color string value of the domstring type (color word)

Createradialgradient () method to achieve a radial gradient, more than createlineargradient () two RADIUS parameters

Pattern:

The canvas element also allows you to use patterns to stroke and fill graphics and text, which can be an image element, a canvas element, or a video element

Createpattern () method to create a pattern that receives two parameters: the pattern itself, a string that represents a repeating pattern (repeat, repeat-x, repeat-y, No-repeat)

Shadow:

Whether you're drawing an image or text, you can specify a shadow effect by modifying the property values in the drawing environment

SHADOWCOLOR:CSS3 format color (set to undefined disables shadows)

SHADOWOFFSETX: Horizontal offset from graphic or text to shadow (set negative to left)

Shadowoffsety: Vertical offset from graphic or text to shadow (set to negative is up)

Shadowblur: A numeric value (integer) that represents a Gaussian blur

Paths, strokes, and fills:

Closed path (closed path)

Development path (open path)