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>

结果展示:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/217934.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

震坤行2023安全月活动顺利收官

震坤行2023安全月活动顺利收官 2023年6月&#xff0c;是第22个全国“安全生产月”&#xff0c;主题为 “人人讲安全、个个会应急”。震坤行工业超市(上海)有限公司基于国家 “安全生产月”的主题要求&#xff0c;以及公司具体的安全形势&#xff0c;于6月1日在全公司范围内正式…

EM32DX-E4【C#】

1外观&#xff1a; ecat总线&#xff0c;分布式io 2电源&#xff1a; 靠近SW拨码&#xff1a;24V 中间&#xff1a;0V 靠近面板&#xff1a;PE接地 3DI&#xff1a; 6000H DI输入寄存器 16-bit &#xff08;16位输入&#xff09; 00H U8 子索引总数 01H Unsigned16 IN1…

TCP 半连接队列和全连接队列

在 TCP 三次握手的时候&#xff0c;Linux 内核会维护两个队列&#xff0c;分别是&#xff1a; 半连接队列&#xff0c;也称 SYN 队列&#xff1b; 全连接队列&#xff0c;也称 accept 队列&#xff1b; 服务端收到客户端发起的 SYN 请求后&#xff0c;内核会把该连接存储到半连…

数据库系统概论期末经典大题讲解(用关系代数进行查询)

今天也是结束的最为密集的考试周&#xff0c;在分析过程中自己也有些许解题的感悟&#xff0c;在此分享出来&#xff0c;希望能帮到大家期末取得好成绩。 一.专门的关系运算 1.选择&#xff08;σ&#xff09; 选择操作符用于从关系中选择满足特定条件的元组 例如&#xff0c;…

计算机组成原理学习-总线总结

复习本章时&#xff0c;思考以下问题&#xff1a; 1)引入总线结构有什么好处&#xff1f;2)引入总线结构会导致什么问题&#xff1f;如何解决&#xff1f;

【专题】【中值定理-还原大法】

1&#xff09;构造辅助函数 2&#xff09;罗尔定理&#xff1a; 闭区间连续&#xff0c;开区间可导 F&#xff08;a&#xff09;F&#xff08;b&#xff09; 3&#xff09;F‘&#xff08;ξ&#xff09;0&#xff0c;原命题得证 极限保号性&#xff1a;

WPS论文写作——公式和公式序号格式化

首先新建一个表格&#xff0c;表格尺寸按你的需求来确定&#xff0c;直接 插入--》表格 即可。 然后在表格对应位置填上公式&#xff08;公式要用公式编辑器&#xff09;和公式序号&#xff0c;然后可以按照单独的单元格或者整行或整列等来设置样式&#xff0c;比如居中对齐、…

微服务实战系列之Cache(技巧篇)

前言 凡工具必带使用说明书&#xff0c;如不合理的使用&#xff0c;可能得到“意外收获”。这就好比每个人擅长的领域有所差异&#xff0c;如果放错了位置或用错了人&#xff0c;也一定会让 Leader 们陷入两难之地&#xff1a;“上无法肩负领导之重托&#xff0c;下难免失去伙伴…

123456前端调AES加密方法变为YehdBPev

使用密码加密服务: pig4cloud 加密服务

(华为)网络工程师教程笔记(网工教程)网工入门——3、静态路由路由表的配置

参考文章&#xff1a;【全236集】网络工程师从基础入门到进阶必学教程&#xff01;通俗易懂&#xff0c;2023最新版&#xff0c;学完即可就业&#xff01;网工入门_华为认证_HCIA_HCIP_数据通信_网工学习路线 文章目录 13. 网工入门10-静态路由&#xff08;路由表的配置&#x…

传输层可靠传输的原理

目录 1.停止等待协议 2.连续ARQ协议 3.TCP报文段的首部格式 4.TCP的滑动窗口机制 &#xff08;1&#xff09;发送窗口 &#xff08;2&#xff09;接收窗口 &#xff08;3&#xff09;发送缓存 5.超时重传时间的选择 6.选择确认SACK(Selective ACK) 7.使用滑动窗口实现…

TCP三次握手与四次挥手:推荐学习资料、过程详解、面试相关题与回答模板(为什么不是两次握手等精讲)

推荐资料&#xff08;建议按照顺序先都看完&#xff0c;再看本篇文章&#xff09; https://www.bilibili.com/video/BV18h41187Ep/ https://www.bilibili.com/video/BV1at4y1Q77b/ https://bbs.huaweicloud.com/blogs/277728 https://blog.csdn.net/dreamispossible/article/d…

vm net 方式 静态ip配置访问主机IP和外网

1、win 11 安装vm&#xff0c;镜像文件 F:\software\VMwork\CentOS-7-x86_64-Everything-1804.iso 2、配置网络 net 方式 3、右击网络--》属性---》更改适配器设置--》vmnet8 属性、这里不做配置会出现主机ping通访问不通的情况&#xff0c;&#xff08;访问不通&#xff0c;…

pytorch 数据预加载

1. Abstract 本文介绍一个工具 PreDataLoader&#xff0c;它包装 torch.utils.data.DataLoader&#xff0c;接收该类的一个实例 loader&#xff0c;启动一个线程 t&#xff0c;创建一个队列 q&#xff0c;t 将 loader 中的数据预加载到队列 q 中, 以在模型计算时也能启动启动数…

知识蒸馏的蒸馏损失方法代码总结(包括:基于logits的方法:KLDiv,dist,dkd等,基于中间层提示的方法:)

有两种知识蒸馏方法&#xff1a;一种利用教师模型的输出概率&#xff08;基于logits的方法&#xff09;[15,14,11]&#xff0c;另一种利用教师模型的中间表示&#xff08;基于提示的方法&#xff09;[12,13,18,17]。基于logits的方法利用教师的输出作为辅助信号来训练一个较小的…

图像万物分割——Segment Anything算法解析与模型推理

一、概述 在视觉任务中&#xff0c;图像分割任务是一个很广泛的领域&#xff0c;应用于交互式分割&#xff0c;边缘检测&#xff0c;超像素化&#xff0c;感兴趣目标生成&#xff0c;前景分割&#xff0c;语义分割&#xff0c;实例分割&#xff0c;泛视分割等。 交互式分割&am…

(c语言进阶)offsetof函数——计算结构体元素的偏移量

一.基本概念&#xff1a; 头文件&#xff1a;<stddef.h> offsetof(结构体名,结构体元素名) 返回值为size_t&#xff08;unsigned int&#xff09; 二.应用 例题&#xff1a; #include<stdio.h> #include<stddef.h> typedef struct S1 {char a;int b;c…

Clean 架构下的现代 Android 架构指南

Clean 架构下的现代 Android 架构指南 Clean 架构是 Uncle Bob 提出的一种软件架构&#xff0c;Bob 大叔同时也是 SOLID 原则的命名者。 Clean 架构图如下&#xff1a; 这张图描述的是整个软件系统的架构&#xff0c;而不是单体软件&#xff0c;其中至少包括服务端以及客户端…

JVM类加载全过程

Java虚拟机类加载的全过程&#xff0c;即加载&#xff0c;验证&#xff0c;准备&#xff0c;解析&#xff0c;初始化 一、加载 加载 是 类加载过程中的一个阶段&#xff0c; 有以下三部分组成 1&#xff09;通过一个类的全限定名来获取定义此类的二进制流 2&#xff09;将这…

【Java 基础】19 多线程基础

文章目录 进程和线程进程&#xff08;Process&#xff09;线程&#xff08;Thread&#xff09; 线程的创建1&#xff09;继承 Thread 类2&#xff09;实现 Runnable 接口3&#xff09;使用 Lambda 表达式4&#xff09;总结 线程的状态状态的分类状态间转换 多线程是一种 同时执…