初探canvas绘图(画布-画笔-矩形)

最新推荐文章于 2022-07-15 17:29:24 发布

书院二层楼

最新推荐文章于 2022-07-15 17:29:24 发布

阅读量276

点赞数

分类专栏： canvas JS 文章标签： js canvas

本文链接：https://blog.csdn.net/caoxinjian423/article/details/109486270

版权

JS 同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

canvas

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初探canvas绘图</title>
    <style>
        #test{
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <canvas id="test" width="800" height="900"></canvas>
    <script>
        /** @type {HTMLCanvasElement} */  
        //获取画布
        const cvs = document.getElementById("test");
        //覆盖html中设置的长宽
        cvs.width=350;
        cvs.height = 150;
        //获取画笔
       const ctx = cvs.getContext("2d");
        //勾画矩形框，并使用颜色填充矩形框
        ctx.fillStyle="red";
        ctx.fillRect(
            20,20,
            200,100
        )
    </script>
</body>
</html>