基于画布标签在页面上渲染爱心

最新推荐文章于 2024-08-22 14:32:34 发布

俩碗螺蛳粉

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量307

点赞数 10

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_56286359/article/details/136720427

版权

该功能实现需要用到 bootstrap库中的 css样式，

参考官网为：下载 Bootstrap · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网

一、代码区域

    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <style></style>
</head>

<body>
    <canvas id="canvas" class="bg-success"></canvas>
    <script>
        // 获取canvas对象
        var canvas = document.getElementById("canvas");
        var obj = {
            x: 250, y: 250,
            w: 100, h: 100,
            r: 50
        }

        // 设置画布尺寸
        canvas.width = 600;
        canvas.height = 600;
        // 获取绘制图形图像的对象 （画笔）
        var pen = canvas.getContext("2d");
        //  1.先画一个矩形
        var drawRect = function (x, y, w, h, color = "red") {
            pen.beginPath();
            pen.fillStyle = color;
            pen.fillRect(x, y, w, h);
            pen.closePath();
        }
        // 2.画圆
        var drawCircle = function (x, y, r, begin, end, color = "red") {
            pen.beginPath();
            pen.fillStyle = color;
            pen.arc(
                x, y, r,
                begin * Math.PI / 180,
                end * Math.PI / 180,
                true
            )
            pen.closePath();
            pen.fill();
        }
        drawRect(
            obj.x,
            obj.y,
            obj.w,
            obj.h,
        )
        drawCircle(
            obj.x + 50,
            obj.y,
            obj.r,
            0,
            360
        )
        drawCircle(
            obj.x,
            obj.y + 50,
            obj.r,
            0,
            360
        )
    </script>
</body>

二、代码效果预览