canvas绘制小丑

最新推荐文章于 2024-11-05 22:07:06 发布

Ian1025

最新推荐文章于 2024-11-05 22:07:06 发布

阅读量468

点赞数 7

文章标签：开发语言 javascript 前端框架前端 json css

本文链接：https://blog.csdn.net/Ian1025/article/details/134764888

版权

说明：

借鉴博主基于canvas绘制一个爱心(10行代码就够了) - 掘金 (juejin.cn)

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        #canvas{
            border:1px solid #000;
        }
    </style>

</head>
<body>
    <!-- canvas画布 -->
    <canvas id="canvas" width="800" height="600"></canvas>
    <script>
        $(function () {

        let canvas = $('#canvas');
        let ctx  = canvas.get(0).getContext('2d')
        // 文字大小
        ctx.font='100px 微软雅黑'
        ctx.fillStyle = 'pink'
        //ctx.fillText('❤',300,300)
        ctx.fillText('🤡',300,300)

        })


    </script>
</body>
</html>