Canvas 绘制矩形(rect()，strokeRect()，fillRect())

最新推荐文章于 2023-07-22 23:27:17 发布

houyanhua1

最新推荐文章于 2023-07-22 23:27:17 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Canvas 文章标签： canvas 矩形绘制矩形

本文链接：https://blog.youkuaiyun.com/houyanhua1/article/details/79881868

Canvas 专栏收录该内容

33 篇文章

订阅专栏

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas id="cvs" width="500" height="500"></canvas>
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        /*
        * 画一个矩形路径：
        * ctx.rect( 起点x轴坐标，起点y轴坐标，宽，高 );
        * */
        ctx.rect( 30, 10, 50, 50 );
        ctx.stroke();  //需要手动调用 stroke()或fill()方法绘制。

        /*
        * 绘制一个描边矩形，直接绘制,不需要手动调用stroke()：
        * ctx.strokeRect( 起点x轴坐标，起点y轴坐标，宽，高 )
        * */
        ctx.strokeRect( 30, 100, 50, 50 );

        /*
         * 绘制一个填充矩形，直接绘制,不需要手动调用fill()：
         * ctx.fillRect( 起点x轴坐标，起点y轴坐标，宽，高 )
         * */
        ctx.fillRect( 30, 170, 50, 50 );
    </script>
</body>
</html>