canvas绘制矩形

最新推荐文章于 2023-11-25 00:15:00 发布

jojo付啾啾

最新推荐文章于 2023-11-25 00:15:00 发布

阅读量755

点赞数

分类专栏： html5 文章标签：前端 html5 canvas画矩形

本文链接：https://blog.csdn.net/DreamFJ/article/details/81476687

版权

html5 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

如果后绘制的图形与前绘制的图形有重叠，则后绘制的图形会覆盖前绘制的图形

绘制矩形方法：

context.rect(x,y,width,height);// 指定矩形路径，后面还需要stroke()或fill()来绘制

context.fillRect(x,y,width,height);// 直接根据指定的路径来填充矩形
context.strokeRect(x,y,width,height);// 直接根据指定的路径来绘制矩形

eg1: rect(x,y,width,height)

<body>
    <canvas id="canvas" style="border: 1px solid #eee;"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");

        canvas.width = 1000;
        canvas.height = 768;

        context.rect(100, 100, 400, 400);

        context.lineWidth = 5;
        context.strokeStyle = 'red';

        context.stroke();
    </script>
</body>

eg1:结果

eg2: strokeRect(x,y,width,height)

<body>
    <canvas id="canvas" style="border: 1px solid #eee;"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");

        canvas.width = 1000;
        canvas.height = 768;

        context.lineWidth = 5;
        context.strokeStyle = 'red';

        context.strokeRect(100, 100, 400, 400);
    </script>
</body>

eg2:结果

eg3: fillRect(x,y,width,height)

<body>
    <canvas id="canvas" style="border: 1px solid #eee;"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");

        canvas.width = 1000;
        canvas.height = 768;

        context.lineWidth = 5;
        context.fillStyle = 'blue';
        context.strokeStyle = 'red';

        context.fillRect(100, 100, 400, 400);
        context.strokeRect(100, 100, 400, 400);
    </script>
</body>

eg3:结果

jojo付啾啾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas绘制矩形

如果后绘制的图形与前绘制的图形有重叠，则后绘制的图形会覆盖前绘制的图形绘制矩形方法：context.rect(x,y,width,height);// 指定矩形路径，后面还需要stroke()或fill()来绘制context.fillRect(x,y,width,height);// 直接根据指定的路径来填充矩形context.strokeRect(x,y,width,heigh...
复制链接

扫一扫