HTML5 Canvas(1) 绘制基本图形和线条

        window.onload = function () {
            //得到2D渲染上下文
            var context = document.getElementById("myCanvas").getContext("2d");
            //填充一个矩形
            var x = 40, y = 40;
            context.fillStyle = "blue"; //设置填充色
            context.fillRect(x + 5, y + 5, 40, 90);

            //绘制一个矩形边框
            context.strokeStyle = "red"; //设置画笔色
            context.strokeRect(x, y, 50, 100);


            context.beginPath(); //beginPath1
            context.moveTo(10, 10);
            context.lineTo(150, 50);
            context.lineTo(140, 33);
            context.strokeStyle = "green";
            context.stroke();

            context.beginPath(); //beginPath2
            context.moveTo(22, 22);
            context.lineTo(10, 50);
            context.lineTo(30, 100);
            context.closePath(); //closePath可以让线条闭合
         context.strokeStyle = "#0000FF";

            context.fill();//填充线条轮廓区域

        };

beginPath的作用是开辟新的绘图路径，不会影响其他路径，如把beginPath2注释掉后，运行会出现2个封闭被#0000FF填充的三角形，即使在beginPath1中使用stroke画出了线条，也会被重绘。

所以一般要画和之前的线条不一样的设置时首先要用beginPath开辟新绘图路径再继续画,才不会影响先前的绘图