当前位置: 首页 > 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/a/157596.html

相关文章:

  • 音频接口:PDM TDM128 TDM256
  • 关于数据流图绘制和使用上的一些个人经验
  • 设计模式-读书笔记
  • WebSocket入门与结合redis
  • 常见异构程序设计语言
  • 【C 语言指针篇】指针的灵动舞步与内存的神秘疆域:于 C 编程世界中领略指针艺术的奇幻华章
  • 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树