HTML5 with Kingdz to explore the path of canvas

Haha, let's get started, the first part of this class isPath。 The path, as the name implies, is I hold the brush, crossed Bai.

A few steps of drawing.

The first step: Find a starting point to start drawing. ----Beginpath;

Step two: underline and draw the image you want.

Step three: Complete the drawing and close the path. Of course, you can do nothing, just draw a point or a line-----closepath

Fourth step: Fill in the color.

Haha, right ah, I was in primary school, art teacher is so taught.

All right, let's draw a graphic. ---draw a line, (*^__^*) hehe ...

    <script type= "Text/javascript" >        function Draw () {            var c = document.getElementById ("MyCanvas");            var cxt = C.getcontext ("2d");            Cxt.beginpath ();            Cxt.moveto (ten);            Cxt.lineto (ten);            Cxt.stroke ();        }    </script>

All right, one line is finished, let's just say it.

MoveTo is a very useful method, which is part of a practical way to draw a path.

You can think of it as the process of lifting a pen and moving from one point to another.

LineTo, of course, is a dash.

The two parameters in parentheses are equivalent to coordinates.

The last step,

Call the stroke or Fill method after this step is finished.

The graph is actually drawn to the canvas.

The stroke is the border of the drawing, and fill fills out a solid shape. When fill is called, the open path is automatically closed without calling Closepath, which requires attention.

Well, with these two words above, we'll draw an equilateral right triangle .

    <script type= "Text/javascript" >        function Draw () {            var c = document.getElementById ("MyCanvas");            var cxt = C.getcontext ("2d");            Cxt.beginpath ();            Cxt.moveto (ten);            Cxt.lineto (ten);            Cxt.lineto (+);            Cxt.fill ();        }    </script>

Of course, you'll have to do it at the end of the stroke ().

function Draw () {        var c = document.getElementById ("MyCanvas");        var cxt = C.getcontext ("2d");        Cxt.beginpath ();        Cxt.moveto (ten);        Cxt.lineto (ten);        Cxt.lineto (+);        Cxt.lineto (ten);        Cxt.stroke ();    }

Oh, fun not????

Then let's go ahead and draw a circle below.

The Arc method is to draw an arc or a circle.

Arc (x, Y, radius, startangle, Endangle, anticlockwise)
Arc (x, Y, radius, startangle, Endangle, anticlockwise)

The method accepts five parameters:

1, x, Y is the center coordinate;
2, radius is radius;
3, StartAngle is the arc (with the X axis as the benchmark);
4, Endangle is the last Radian (with the X axis as the benchmark);
5, Anticlockwise is true to counter-clockwise, reverse clockwise.

Well, the job is ready, go ahead,

function Draw () {    var c = document.getElementById ("MyCanvas");    var cxt = C.getcontext ("2d");    Cxt.fillstyle = "#596";    Cxt.beginpath ();    Cxt.arc (0, Math.PI * 2, true);    Cxt.closepath ();    Cxt.fill ();}

Draw a big circle.

Attention:

The angle used in the Arc method is measured in radians rather than degrees.

A direct conversion of degrees and radians can be used with this expression: var radians = (math.pi/180) * angle;. JS doesn't support Chinese, so it's easy to understand .

Of course, you can draw some arcs. For example

The code is as follows

function Draw () {            var c = document.getElementById ("MyCanvas");            var cxt = C.getcontext ("2d");            Cxt.fillstyle = "#596";            Cxt.beginpath ();            Cxt.arc (1, Math.PI * 1.5, true);            Cxt.stroke ();        } below, we are implementing an effect that is to implement a similar  forms of demining 

This is actually a two cycle,

    <script type= "Text/javascript" >        function Draw () {            var c = document.getElementById ("MyCanvas");            var cxt = C.getcontext ("2d");            Cxt.beginpath ();            for (var x = 0.5; x <; x + =) {                cxt.moveto (x, 0);                Cxt.lineto (x, n);            }            for (var y = 0.5; y < x; y + +) {                Cxt.moveto (0, y);                Cxt.lineto (x, y);            }            Cxt.strokestyle = "#ff0000";            Cxt.stroke ();        }    </script>

Well, finish the task and this lesson is over.

HTML5 with Kingdz to explore the path of canvas