canvas之绘制矩形和清除画布

最新推荐文章于 2024-07-28 23:35:40 发布

滑板不摔跤

最新推荐文章于 2024-07-28 23:35:40 发布

阅读量1.6k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/hstjbj/article/details/103121450

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

多种绘制方式

方式一：自己用线条进行绘制
方式二：rect函数绘制

<head>
    <meta charset="UTF-8">
    <title>绘制矩形</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #cvs {
            border: 1px solid #000;
        }

    </style>
</head>
<body>
    <canvas id="cvs" height="500" width="600"></canvas>
</body>
<script>
    //获取画布。  相当于拿到了绘画的一张纸
    var cas = document.getElementById('cvs');
    //有了纸后，还需要有一只笔才能进行绘画。 这是一个绘画2d图形的笔
    var pencil = cas.getContext('2d');

    //开始绘画
    pencil.beginPath();

    //用rect函数进行绘画， 参数分别是： 起始位置的x坐标 起始位置的y坐标 矩形的宽 矩形的高
    pencil.rect(60,80,100,40);
    //下面是对矩形的样式设置
    pencil.strokeStyle='green';
    pencil.lineWidth='4';
    pencil.stroke();

    // pencil.rect(60, 80,200,100);
    // // pencil.strokeStyle='blue';
    // // pencil.stroke();
    //
    // pencil.fillStyle ='yellow';
    // pencil.fill();
    //
    // // pencil.strokeStyle='red';
    // pencil.strokeRect(60,100,200,200);
    // pencil.stroke();
</script>

方式三：strokeRect绘制描边的矩形

<script>
    //获取画布。  相当于拿到了绘画的一张纸
    var cas = document.getElementById('cvs');
    //有了纸后，还需要有一只笔才能进行绘画。 这是一个绘画2d图形的笔
    var pencil = cas.getContext('2d');

    //开始绘画
    pencil.beginPath();
    //给描边设置颜色，默认为黑色  注意**  描边颜色的设置必须在执行方法之前，否则无效
    pencil.strokeStyle='red';

    //用strokeRect函数进行绘画， 参数分别是： 起始位置的x坐标 起始位置的y坐标 矩形的宽 矩形的高
    pencil.strokeRect(60,100,200,200);
    pencil.stroke();
</script>

方式四：

<script>
    //获取画布。  相当于拿到了绘画的一张纸
    var cas = document.getElementById('cvs');
    //有了纸后，还需要有一只笔才能进行绘画。 这是一个绘画2d图形的笔
    var pencil = cas.getContext('2d');

    //开始绘画
    pencil.beginPath();
    //给图形填充颜色，默认为黑色 注意** 填充颜色的设置必须在执行方法之前，否则无效
    pencil.fillStyle='#60dcef';
    //用fillRect函数进行绘画， 参数分别是： 起始位置的x坐标 起始位置的y坐标 矩形的宽 矩形的高
    pencil.fillRect(60,100,200,200);
    pencil.fill();
</script>

综合案例绘制多个重叠的矩形

<script>
    //获取画布。  相当于拿到了绘画的一张纸
    var cas = document.getElementById('cvs');
    //有了纸后，还需要有一只笔才能进行绘画。 这是一个绘画2d图形的笔
    var pencil = cas.getContext('2d');

    //开始绘画
    pencil.beginPath();
    //绘制最底层的矩形
    pencil.fillStyle='#60dcef';
    pencil.fillRect(60,100,200,200);
    pencil.fill();

    //绘制中间层的矩形
    pencil.fillStyle='#ef91e5';
    pencil.fillRect(90,130,200,200);
    pencil.fill();
    //绘制最上层的矩形
    pencil.fillStyle='#53ef59';
    pencil.fillRect(120,160,200,200);
    pencil.fill();
</script>

清除画布

 //获取画布。  相当于拿到了绘画的一张纸
    var cas = document.getElementById('cvs');
    //有了纸后，还需要有一只笔才能进行绘画。 这是一个绘画2d图形的笔
    var pencil = cas.getContext('2d');

    //开始绘画
    pencil.beginPath();

    pencil.fillStyle='blue';
    pencil.fillRect(40,60,200,200);

    //用橡皮擦去颜色。
    //参数描述： 擦除的起始x坐标，擦除的起始y坐标； 想要擦掉的宽度，想要擦掉的高度
    pencil.clearRect(50,80,50,50);

    //擦除画布上的所有元素
    // pencil.clearRect(0,0,cas.width,cas.height);