[Javascript] Drawing Paths - Lines and Rectangles 

<!DOCTYPE html>
<html>
<head>
    <meta name="description" content="HTML5 Canvas Graphics and Animation Video 1" />
    <meta charset="utf-8">
    <title>HTML5 Canvas Graphics and Animation</title>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script src="app.js"></script>
</body>
</html>

 

/**
 * Created by Answer1215 on 3/19/2015.
 */
window.onload = function() {

    //var canvas = $("#canvas")[0];
    //var canvas = document.getElmenetByTagName("canvas")[0];
    var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d");
        canvas.width = 400;
        canvas.height = 700;


    //context.fillRect(10, 10, 100, 200);
/**/
   context.beginPath();
    context.moveTo(100,100); //without draw any line;
    context.lineTo(300, 100);
    context.lineTo(300, 200);
    context.lineTo(100, 200);
    context.lineTo(100, 100);

    context.closePath();
    context.stroke();

    //context.fill();  //fill() will also close the path for you
                    //so if you use fill(), you don't need closePath(); but in case you forgot
                    //to close the path later, just remember to close it every times.
/**/

/**/
    context.rect(100,100,100,300);            //make a rect and stroke it
    context.stroke();
    
    context.fillRect(100,100,100,300);        //fill rect
    context.strokeRect(100,100,100,300);      //draw rect
    context.clearRect(100,100,100,300);       //clean the canvas*/
};

 

posted @ 2015-03-19 21:34  Zhentiw  阅读(216)  评论(0)    收藏  举报