canvas-Dazzle's Countdown effect canvas drawing and animation basics

Canvas is drawn based on the turntable.

For a look at Canvas's browser compatibility issues, as shown in. (from can I use)

Tips: Just take to IE8 under the test, what reaction is not, in advance set up, if the browser does not support the prompt is not prompted, the developer tool in the element code is nothing.

Html:

<canvas id= "Canvas" style= "border:1px solid red;" ></canvas>

Js:

var canvas = document.getElementById (' canvas '); var context = Canvas.getcontext (' 2d ');

Note that the unit is not added, and it is not recommended to set the width height in CSS. It is best to call the width and height of the two properties canvas.width = 1024;canvas.height = 768;

　Practice: Draw a straight line (to be very careful, the state must first set to adjust the stroke () method to draw, if the order is reversed, will not result, and no error, debugger also tune no problem. ）

First, the state Context.moveto (Context.lineto), Context.lineto (100, 100), and the Context.lineto. Context.linewidth = 10;context.strokestyle = "Pink";//re-input to draw context.stroke ();

　Define a path:

Context.moveto (+);  Accepts two parameters, representing x-coordinate and y-coordinate context.lineto (700, 700);

Define multiple paths: Wrap the state you want to define in the following way, and then call the stroke () method to draw lines of different states

Context.beginpath (); Context.closepath ();

　　

Not finished ...

　

canvas-Dazzle's Countdown effect canvas drawing and animation basics