HTML5 Canvas coding of colorful beads (1): preview

HTML5 has been launched for a long time and has never been learned. You have no time to learn and develop a game. Write a colorful game with javascript + canvas.
Canvas
Label <canvas id = "canvas"> </canvas>. It is very simple and has no difference with common tags. The key lies in js's operations on him. Let's first look at the sample code:
<Canvas id = "canvas" height = "100" width = "100"> </canvas>
<Script>
Var canvas = document. getElementById ("canvas ");
Var ctx = canvas. getContext ("2d ");
Ctx. beginPath ();
Ctx. moveTo (50, 10 );
Ctx. lineTo (50, 90 );
Ctx. moveTo (10, 50 );
Ctx. lineTo (90,50 );

Ctx. strokeStyle = "red ";
Ctx. stroke ();
</Script>
Can you see what I drew? Ctx is a 2D drawing type of canvas. It will support 3D in the future. Currently, canvas-based painting calls the 2d context method. So to understand how to draw various graphics, you must first look at his api.
Interface CanvasRenderingContext2D {

// Back-reference to the canvas
Readonly attribute HTMLCanvasElement canvas;

// State
Void save (); // push state on state stack
Void restore (); // pop state stack and restore state
// Transformations (default transform is the identity matrix)
Void scale (in double x, in double y );
Void rotate (in double angle );
Void translate (in double x, in double y );
Void transform (in double a, in double B, in double c, in double d, in double e, in double f );
Void setTransform (in double a, in double B, in double c, in double d, in double e, in double f );
// Compositing
Attribute double globalAlpha; // (default 1.0)
Attribute DOMString globalCompositeOperation; // (default source-over)
// Colors and styles
Attribute any strokeStyle; // (default black)
Attribute any fillStyle; // (default black)
CanvasGradient createLinearGradient (in double x0, in double y0, in double x1, in double y1 );
CanvasGradient createRadialGradient (in double x0, in double y0, in double r0, in double x1, in double y1, in double r1 );
CanvasPattern createPattern (in HTMLImageElement image, in DOMString repetition );
CanvasPattern createPattern (in HTMLCanvasElement image, in DOMString repetition );
CanvasPattern createPattern (in HTMLVideoElement image, in DOMString repetition );

// Line caps/joins
Attribute double lineWidth; // (default 1)
Attribute DOMString lineCap; // "butt", "round", "square" (default "butt ")
Attribute DOMString lineJoin; // "round", "bevel", "miter" (default "miter ")
Attribute double miterLimit; // (default 10)

// Shadows
Attribute double shadowOffsetX; // (default 0)
Attribute double shadowOffsetY; // (default 0)
Attribute double shadowBlur; // (default 0)
Attribute DOMString shadowColor; // (default transparent black)

// Rects
Void clearRect (in double x, in double y, in double w, in double h );
Void fillRect (in double x, in double y, in double w, in double h );
Void strokeRect (in double x, in double y, in double w, in double h );

// Path API
Void beginPath ();
Void closePath ();
Void moveTo (in double x, in double y );
Void lineTo (in double x, in double y );
Void quadraticCurveTo (in double cpx, in double cpy, in double x, in double y );
Void bezierCurveTo (in double cp1x, in double cp1y, in double cp2x, in double cp2y, in double x, in double y );
Void arcTo (in double x1, in double y1, in double x2, in double y2, in double radius );
Void rect (in double x, in double y, in double w, in double h );
Void arc (in double x, in double y, in double radius, in double startAngle, in double endAngle, in optional boolean anticlockwise );
Void fill ();
Void stroke ();
Void clip ();
Boolean isPointInPath (in double x, in double y );

// Focus management
Boolean drawFocusRing (in Element element, in optional boolean canDrawCustom );

// Caret and selection management
Long caretBlinkRate ();
Boolean setCaretSelectionRect (in Element element, in double x, in double y, in double w, in double h );

// Text
Attribute DOMString font; // (default 10px sans-serif)
Attribute DOMString textAlign; // "start", "end", "left", "right", "center" (default: "start ")
Attribute DOMString textBaseline; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic ")
Void fillText (in DOMString text, in double x, in double y, in optional double maxWidth );
Void strokeText (in DOMString text, in double x, in double y, in optional double maxWidth );
TextMetrics measureText (in DOMString text );

// Drawing images
Void drawImage (in HTMLImageElement image, in double dx, in double dy, in optional double dw, in double dh );
Void drawImage (in HTMLImageElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh );
Void drawImage (in HTMLCanvasElement image, in double dx, in double dy, in optional double dw, in double dh );
Void drawImage (in HTMLCanvasElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh );
Void drawImage (in HTMLVideoElement image, in double dx, in double dy, in optional double dw, in double dh );
Void drawImage (in HTMLVideoElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh );

// Pixel manipulation
ImageData createImageData (in double sw, in double sh );
ImageData createImageData (in ImageData imagedata );
ImageData getImageData (in double sx, in double sy, in double sw, in double sh );
Void putImageData (in ImageData imagedata, in double dx, in double dy, in optional double dirtyX, in double dirtyY, in double dirtyWidth, in double dirtyHeight );
};

Interface CanvasGradient {
// Opaque object
Void addColorStop (in double offset, in DOMString color );
};

Interface CanvasPattern {
// Opaque object
};

Interface TextMetrics {
Readonly attribute double width;
};

Interface ImageData {
Readonly attribute unsigned long width;
Readonly attribute unsigned long height;
Readonly attribute CanvasPixelArray data;
};

Interface CanvasPixelArray {
Readonly attribute unsigned long length;
Getter octet (in unsigned long index );
Setter void (in unsigned long index, in octet value );
};

The content above is the official one I pasted.
Now that we know the functions of lineTo and moveTo, we should first draw the lattice board of the game:
<Canvas id = "canvas" height = "600" width = "780" style = "border: solid 1px #369; background: #333"> </canvas>
<Script>
Var canvas = document. getElementById ("canvas ");
 
Var ctx = canvas. getContext ("2d ");
 
DrawMap ();
 
Function drawMap ()
{
Var start = 10;
Ctx. beginPath ();
Var cell = 30;
Var max = cell * 9 + start;
// Ctx. strokeRect (10, 10, max, max );
Ctx. moveTo (start, start );

For (var I = 0; I <= 9; I ++ ){
Var p = I * cell + start + 0.5;
Ctx. lineTo (p, max );
Ctx. moveTo (p + cell, start );
}

For (var I = 0; I <= 9; I ++ ){
Var p = I * cell + start + 0.5;
Ctx. moveTo (start, p );
Ctx. lineTo (max, p );
}

Ctx. strokeStyle = "#567 ";
Ctx. stroke ();
}

</Script>

From the running effect, we can see that our board was drawn from the position of 10 pixels, and a 9*9 lattice colorful board.

 

This is the Getting Started today. The next section will show you how to draw a ball...

From Jun Zhiqiang