canvas学习绘画矩形

1.掌握绘制矩形的方法：strkeRect()/fillRect()

2.掌握绘制路径的beginPath()和closePath()

beginPath()用来创建新的路径

closePath()从当前点回到起始点，封闭路径边角无漏

context3.moveTo(100,100);
context3.lineTo(400,100);
context3.lineTo(400,400);
context3.lineTo(100,400);
//context3.lineTo(100,100);
context3.closePath();
context3.stroke();

3.rect(x,y,w,h)创建一个矩形，strokeRect(x,y,w,hx,y,w,h)绘制矩形（无填充）

strokeRect(x,y,w,h)相当于Rect(x,y,w,h)+stroke()

<script type="text/javascript">
    var canvas3=document.getElementById('mycanvas3');
    var context3=canvas3.getContext('2d');
    context3.lineWidth=10;
    context3.strokeStyle="#A52A2A";
    context3.rect(200,200,100,100);
    context3.stroke();
    var c=canvas3.getContext('2d');
    c.beginPath();
    c.lineWidth=10;
    c.strokeStyle='green';
    c.strokeRect(100,100,100,100);
</script>

4.fillRect(x,y,w,h)绘制“被填充”的矩形，fill()绘制已定义的路径（带填充的图形）

var c=canvas3.getContext('2d');
c.beginPath();
c.lineWidth=10;
c.strokeStyle='green';
c.strokeRect(100,100,100,100);
c.beginPath();
c.fillStyle='red';
c.rect(300,100,100,100);
c.fill();
c.beginPath();
c.fillStyle='black';
c.fillRect(100,300,100,100);
c.fillRect(300,300,100,100);

5.stroke()绘制已定义的路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas绘制矩形</title>
    <style type="text/css">
        canvas{background:#000fff}
    </style>
</head>
<body>
    <canvas id="mycanvas3" width="500" height="500">
    </canvas>
    <script type="text/javascript">
        var canvas3=document.getElementById('mycanvas3');
        var context3=canvas3.getContext('2d');
        context3.lineWidth=10;
        context3.strokeStyle="#A52A2A";
        context3.moveTo(100,100);
        context3.lineTo(400,100);
        context3.lineTo(400,400);
        context3.lineTo(100,400);
        //context3.lineTo(100,100);
        context3.closePath();
        context3.stroke();
        context3.beginPath();
        context3.lineWidth=5;
        context3.strokeStyle="green";
        context3.rect(200,200,100,100);
        context3.stroke();
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas绘制矩形</title>
    <style type="text/css">
        canvas{background:#000fff}
    </style>
</head>
<body>
    <canvas id="mycanvas3" width="500" height="500">
    </canvas>
    <script type="text/javascript">
        var canvas3=document.getElementById('mycanvas3');
        var context3=canvas3.getContext('2d');
        context3.lineWidth=10;
        context3.strokeStyle="#A52A2A";
        context3.rect(200,200,100,100);
        context3.stroke();
        var c=canvas3.getContext('2d');
        c.beginPath();
        c.lineWidth=10;
        c.strokeStyle='green';
        c.strokeRect(100,100,100,100);
        c.beginPath();
        c.fillStyle='red';
        c.rect(300,100,100,100);
        c.fill();
        c.beginPath();
        c.fillStyle='black';
        c.fillRect(100,300,100,100);
        c.fillRect(300,300,100,100);
    </script>
</body>
</html>