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.mzph.cn/news/197781.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

实现简单的Http服务器+SpringMvc,集成到Spring

实现简单的Http服务器SpringMvc&#xff0c;集成到Spring 1、Http协议 1.1、HTTP 协议请求格式 方法 空格 URL 空格 版本 回车符 换行符头部域名称&#xff1a;头部域值 回车符 换行符...头部域名称&#xff1a;头部域值 回车符 …

《系统架构设计师教程(第2版)》第2章-计算机系统基础知识-03-嵌入式

文章目录 1. 基本概念2. 嵌入式系统的组成3. 嵌入式系统的特点4. 嵌入式系统分类4.1 分类4.2 实时系统(Real-Time System,RTS)4.3 安全攸关系统 (Safety-Critical System)7. 嵌入式软件7.1. 嵌入式系统软件组成架构7.1.1 硬件层7.1.2 抽象层7.1.3 操作系统层7.1.4 中间件层7.1…

【云备份】服务端热点管理业务处理模块

28. 服务端热点管理模块实现-热点管理实现思路 服务器端的热点文件管理是对上传的非热点文件进行压缩存储&#xff0c;节省磁盘空间。 而热点文件的判断在于上传的文件的最后一次访问时间是否在热点判断时间之内&#xff0c;比如如果一个文件一天都没有被访问过我们就认为这是…

【UGUI】sprite精灵的创建与编辑

如何切图&#xff08;sprite editor&#xff09; 有时候一张图可能包含了很多张子图&#xff0c;就需要在Unity 临时处理一下&#xff0c;切开&#xff0c;比如动画序列帧图集 虽然我们可以在PS里面逐个切成一样的尺寸导出多张&#xff0c;再放回Unity&#xff0c;但是不需要这…

音视频技术开发周刊 | 322

每周一期&#xff0c;纵览音视频技术领域的干货。 新闻投稿&#xff1a;contributelivevideostack.com。 超级AI不会主宰人类&#xff0c;但人工智能必须开源&#xff01;LeCun最新采访引全网300万人围观 LeCun最新访谈视频中&#xff0c;再次坦露了自己对开源AI的看法。超级AI…

安路Anlogic FPGA下载器的驱动安装教程

安路FPGA下载器驱动安装教程 安路FPGA下载器&#xff1a;EN-ALC10,是一款高性能FPGA下载线&#xff08;编程器&#xff09;&#xff0c;支持安路的开发软件TDS和全系列FPGA芯片下载编程&#xff0c;支持全速USB2.0与电脑进行数据通信&#xff0c;通过JTAG协议与FPGA进行程序下…

鸿蒙开发:UIAbility组件间交互探索实战【鸿蒙专栏-22】

UIAbility组件间交互(设备内) 在设备内,UIAbility(用户界面能力)是系统调度的最小单元,它们负责展示用户界面和执行相关的业务逻辑。设备内的不同功能模块之间的交互是应用程序开发中的重要部分。本文将探讨设备内UIAbility之间的交互方式,包括启动应用内的UIAbility、…

LeetCode330. Patching Array

文章目录 一、题目二、题解 一、题目 Given a sorted integer array nums and an integer n, add/patch elements to the array such that any number in the range [1, n] inclusive can be formed by the sum of some elements in the array. Return the minimum number of…

Redux

一、纯函数 1、react 中的纯函数 react 中组件就被要求像是一个纯函数&#xff08;因为还有类组件&#xff09;redux 中有一个reducer 的概念&#xff0c;也是要求必须是一个纯函数 2、 纯函数的条件 确定的输入一定会产生确定的输出函数在执行过程中&#xff0c;不能产生副…

vue自定义指令:指定文字高亮

vue自定义指令&#xff1a;指定文字高亮 自定义指令 除了核心功能默认内置的指令 (v-model 和 v-show)&#xff0c;Vue 也允许注册自定义指令。注意&#xff0c;在 Vue2.0 中&#xff0c;代码复用和抽象的主要形式是组件。然而&#xff0c;有的情况下&#xff0c;你仍然需要对…

【重点】【区间问题】56.合并区间

题目 注意有个类似的题目&#xff1a;&#xff0c;注意区分。 class Solution {public int[][] merge(int[][] intervals) {List<List<Integer>> res new ArrayList<>();Arrays.sort(intervals, (a1, a2) -> {return a1[0] - a2[0];});int left Intege…

JS实现成才网注册系统(网页数据验证)

主代码 <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"http://www.w3.org/1999/xhtml"><head><meta http-equiv"Conten…

Hadoop进阶学习---HDFS分布式文件存储系统

1.hdfs分布式文件存储的特点 分布式存储:一次写入,多次读取 HDFS文件系统可存储超大文件,时效性较差. HDFS基友硬件故障检测和自动快速恢复功能. HDFS为数据存储提供很强的扩展能力. HDFS存储一般为一次写入,多次读取,只支持追加写入,不支持随机修改. HDFS可以在普通廉价的机器…

Linux: 文档 :相关接口文档手册还是需要仔细阅读

接口文档的阅读&#xff0c;一定要仔细。最近遇到一个问题&#xff0c;明明文档里有说&#xff0c;read函数读取到的是一个或者多个events&#xff0c;但是代码里依然按照一个来处理。就会导致漏event的可能。漏了event&#xff0c;后续的逻辑就会受影响。 Each successful rea…

llama.cpp部署(windows)

一、下载源码和模型 下载源码和模型 # 下载源码 git clone https://github.com/ggerganov/llama.cpp.git# 下载llama-7b模型 git clone https://www.modelscope.cn/skyline2006/llama-7b.git查看cmake版本&#xff1a; D:\pyworkspace\llama_cpp\llama.cpp\build>cmake --…

Leetcode1038. 从二叉搜索树到更大和树(每日一题)

目录 ⚽题目&#xff1a; &#x1f3d0;题目分析&#xff1a; &#x1f3c0;题目解答&#xff1a; &#x1f94e;代码如下&#xff1a; ⚽题目&#xff1a; 给定一个二叉搜索树 root (BST)&#xff0c;请将它的每个节点的值替换成树中大于或者等于该节点值的所有节点值…

Stream 流

配合Lambda表达式&#xff0c;简化集合和数组的操作 获取Stream流对象 集合 Collection接口中的方法&#xff1a;stream() 单列&#xff1a;直接调用stream() 多列&#xff1a;间接获取&#xff0c;map.entrySet() ArrayList<String> list new ArrayList<>();…

SSM项目实战-前端-在Index.vue中展示第一页数据

1、util/request.js import axios from "axios";let request axios.create({baseURL: "http://localhost:8080",timeout: 50000 });export default request 2、api/schedule.js import request from "../util/request.js";export let getSchedu…

4-Docker命令之docker run

1.docker run介绍 docker run命令是用来创建新的容器并运行相关命令 2.docker run用法 docker run [参数] [root@centos79 ~]# docker run --helpUsage: docker run [OPTIONS] IMAGE [COMMAND] [ARG...]Create and run a new container from an imageAliases:docker conta…

传输层可靠传输的原理

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