当前位置: 首页 > article >正文

canvas绘制小丑

说明:

借鉴博主基于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>

结果展示:


http://www.kler.cn/news/157596.html

相关文章:

  • Mysql、Oracle区分大小写?
  • 【新手解答8】深入探索 C 语言:递归与循环的应用
  • spring cloud nacos整合gateway
  • 十五、机器学习进阶知识:K-Means聚类算法
  • 【SQL SERVER】定时任务
  • 【ARM Trace32(劳特巴赫) 使用介绍 12 -- Trace32 常用命令之 d.dump | data.dump 介绍】
  • Linux: 文档 :相关接口文档手册还是需要仔细阅读
  • mfc 设置excel 单元格的列宽
  • EM32DX-C4【C#】
  • 解决:ERROR: No matching distribution found for rarfile
  • 传输层可靠传输的原理
  • 【网络安全技术】密钥管理
  • llama.cpp部署(windows)
  • LinuxBasicsForHackers笔记 --添加和删​​除软件
  • Notepad++ 安装TextFx插件失败
  • 双目光波导AR眼镜_AR智能眼镜主板PCB定制开发
  • 探讨Unity中的动画融合技术(BlendTree)
  • <Linux>(极简关键、省时省力)《Linux操作系统原理分析之linux存储管理(5)》(21)
  • C#的方法使用
  • C++数据结构:B树
  • C10练习题
  • 分享几个电视颜色测试图形卡
  • JVM类加载全过程
  • 2023-2024-1-高级语言程序设计-第2次月考函数题
  • 【C语言】预处理详解
  • js获取当前时间,当日零点,前一周时间
  • Web测试自动化工具Selenium的使用
  • Java中熟练掌握BigDecimal运用-工具类
  • netcore swagger 错误 Failed to load API definition
  • 【开源】基于Vue+SpringBoot的康复中心管理系统