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

fabric.js基础使用

article 2026/2/1 16:07:16

1.正方形

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Fabric.js Watermark Example</title><script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"></script><style>#canvas {border: 1px solid #ccc;}</style></head><body><canvas id="canvas" width="800" height="800"></canvas><script>// 初始化 Fabric.js Canvasvar canvas = new fabric.Canvas("canvas");var rect = new fabric.Rect({left: 100, // 靠左距离top: 100, // 靠右距离fill: "red", // 填充颜色width: 30, // 宽度height: 30, // 高度});canvas.add(rect);console.log("666", canvas);</script></body>
</html>

2.圆形，三角形

var rect = new fabric.Rect({left: 100, // 靠左距离top: 100, // 靠右距离fill: "red", // 填充颜色width: 30, // 宽度height: 30, // 高度});// 圆形var circle = new fabric.Circle({radius: 50,fill: "green",left: 200,height: 200,});// 三角形var triangle = new fabric.Triangle({fill: "blue",width: 80,top: 300,left: 200,height: 200,});canvas.add(rect);canvas.add(circle);canvas.add(triangle);

3.图片属性(有水印功能，其实就是添加文字上去)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Fabric.js Watermark Example</title><script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"></script><style>#canvas {border: 1px solid #ccc;}</style></head><body><canvas id="canvas" width="800" height="600"></canvas><imgsrc="./123/10dfa9ec8a13632762d035b5c1dcb7ec08fa503d69a3.jpg"id="img1"/><script>// 初始化 Fabric.js Canvasvar canvas = new fabric.Canvas("canvas");// 加载图片fabric.Image.fromURL("./123/10dfa9ec8a13632762d035b5c1dcb7ec08fa503d69a3.jpg",function (img) {// 设置图片大小和位置（可选）img.scaleToWidth(600);img.scaleToHeight(600);img.angle = 5;console.log("img", img);// 将图片添加到 Canvascanvas.add(img);//   // 添加水印文本var watermarkText = new fabric.Text("水印", {left: 350,top: 350,fill: "rgba(1, 255, 255, 0.5)", // 半透明白色fontSize: 36,fontFamily: "Arial",angle: -30, // 倾斜角度});//   // 将水印文本添加到 Canvascanvas.add(watermarkText);// 渲染 Canvas（Fabric.js 会自动处理，但明确调用也没问题）canvas.renderAll();});</script></body>
</html>

4.路径画多边形

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Fabric.js Watermark Example</title><script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"></script><style>#canvas {border: 1px solid #ccc;}</style></head><body><canvas id="canvas" width="800" height="600"></canvas><script>// 初始化 Fabric.js Canvasvar canvas = new fabric.Canvas("canvas");// M 开始的点 L 中间点 200 200 L 170 200 第三个点 ... z闭合var path = new fabric.Path("M 0 0 L 200 200 L 170 200 L 20 170 z");path.set({left: 120,top: 120,fill: "red",});canvas.add(path);</script></body>
</html>

相关文章：

fabric.js基础使用

1.正方形 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Fabric.js Watermark Example</tit…...

编程日记 2025/11/24 4:27:05

python-Leetcode 65.搜索旋转排序数组

题目&#xff1a; 整数数组nums按升序排列&#xff0c;数组中的值互不相同 在传递给函数之前&#xff0c;nums在预先未知的某个小标K上进行了旋转&#xff0c;使数组变为[nums[k], nums[k1], ..., nums[n-1], nums[0], nums[1], ..., nums[k-1]]&#xff0c;小标从0开始计数。…...

编程日记 2026/1/26 14:15:48

质数质数筛

1.试除法判定质数–O(sqrt(N)) bool is_prime(int x) {if (x < 2) return false;for (int i 2; i < x / i; i )if (x % i 0)return false;return true; }2.试除法分解质因数–O(logN)~O(sqrt(N)) void divide(int x) {for (int i 2; i < x / i; i )if (x % i …...

编程日记 2026/1/3 8:26:15

Django学习记录-1

Django学习记录-1 虽然网上教程都很多&#xff0c;但是感觉自己记录一下才属于自己&#xff0c;之后想找也方面一点&#xff0c;文采不佳看的不爽可绕道。 参考贴 从零开始的Django框架入门到实战教程(内含实战实例) - 01 创建项目与app、加入静态文件、模板语法介绍&#xff…...

编程日记 2026/2/1 0:10:31

K8s私有仓库拉取镜像报错解决：x509 certificate signed by unknown authority

前言 在Kubernetes环境中使用自签名证书的私有Harbor镜像仓库时&#xff0c;常会遇到证书验证失败的问题。本文将详细讲解如何解决这个常见的证书问题。 环境信息&#xff1a; Kubernetes版本&#xff1a;1.28.2容器运行时&#xff1a;containerd 1.6.20私有仓库&#xff1a…...

编程日记 2026/1/26 4:30:15

使用python访问mindie部署的vl多模态模型

说明 今天使用mindie1.0部署了qwen2_7b_vl模型&#xff0c;测试过程出现一些问题&#xff0c;这里总结下。 问题1&#xff1a;transformers版本太低 报错信息&#xff1a; [ERROR] [model_deploy_config.cpp:159] Failed to get vocab size from tokenizer wrapper with ex…...

编程日记 2025/12/11 13:29:09

LabVIEW 长期项目开发

LabVIEW 凭借其图形化编程的独特优势&#xff0c;在工业自动化、测试测量等领域得到了广泛应用。对于长期运行、持续迭代的 LabVIEW 项目而言&#xff0c;其开发过程涵盖架构设计、代码管理、性能优化等多个关键环节&#xff0c;每个环节都对项目的成功起着至关重要的作用。下面…...

编程日记 2026/1/30 9:31:28

MongoDB 的详细介绍

以下是 MongoDB 的详细介绍，涵盖核心概念、使用场景、优势与操作示例： 一、MongoDB 简介 MongoDB 是一个开源的 文档型 NoSQL 数据库，采用灵活的 JSON-like（BSON）格式存储数据，适合处理非结构化或半结构化数据。 核心特点： Schema-free：无需预定义表结构，字段可动态扩…...

编程日记 2025/12/1 21:03:25

Ubuntu 22.04 AI大模型环境配置及常用工具安装

一、基础环境准备 1.1 系统准备 建议使用 Ubuntu22.04 以下配置皆以 Ubuntu22.04 系统版本为例 1.2 安装git apt-get update && apt-get install git -y1.3 安装 Python 3.9 【建议安装 3.10】&#xff08;安装miniconda或者conda来管理虚拟环境&#xff09; wget …...

编程日记 2026/1/15 4:52:07

蓝桥杯真题——好数、R格式

目录 蓝桥杯2024年第十五届省赛真题-好数 【模拟题】 题目描述 输入格式 输出格式 样例输入 样例输出 提示 代码1&#xff1a;有两个案例过不了&#xff0c;超时 蓝桥杯2024年第十五届省赛真题-R 格式 【vector容器的使用】 题目描述 输入格式 输出格式 样例输入…...

编程日记 2026/1/26 14:02:42

AWS S3深度剖析：云存储的瑞士军刀

1. 引言 在当今数据驱动的世界中，高效、可靠、安全的数据存储解决方案至关重要。Amazon Simple Storage Service (S3)作为AWS生态系统中的核心服务之一，为企业和开发者提供了一个强大而灵活的对象存储平台。本文将全面解析S3的核心特性，帮助读者深入理解如何充分利用这一&q…...

编程日记 2025/10/25 22:38:39

Qt基础：右键菜单

右键菜单 1. 基于鼠标事件实现1.1 原理1.2 操作 2. 基于窗口的菜单策略实现2.1 Qt::DefaultContextMenu2.2 Qt::ActionsContextMenu 2.3 Qt::CustomContextMenu 显示右键菜单, 其处理方式大体上有两种&#xff1a; 基于鼠标事件实现&#xff1b;基于窗口的菜单策略实现。 1. …...

编程日记 2026/1/16 5:32:22

Json快速入门

引言 Jsoncpp 库主要是用于实现 Json 格式数据的序列化和反序列化&#xff0c;它实现了将多个数据对象组织成 为Json格式字符串&#xff0c;以及将 Json 格式字符串解析得到多个数据对象的功能&#xff0c;独立于开发语言。 Json数据对象 Json数据对象类的表示&#xff1a; …...

编程日记 2025/8/25 18:34:06

WinForm真入门(10)——CheckBox控件详解

在 WinForm 中&#xff0c;CheckBox 控件是一个用于表示布尔状态&#xff08;选中/未选中&#xff09;的核心组件。它广泛应用于配置选项、表单提交、条件筛选等场景。以下是 ‌CheckBox 的详细解析‌&#xff0c;涵盖属性、事件、使用技巧和实际案例。 一、CheckBox 核心属性…...

编程日记 2025/12/3 7:22:33

网络安全应急响应-系统排查

在网络安全应急响应中&#xff0c;系统排查是快速识别潜在威胁的关键步骤。以下是针对Windows和Linux系统的系统基本信息排查指南&#xff0c;涵盖常用命令及注意事项&#xff1a; 一、Windows系统排查 1. 系统信息工具&#xff08;msinfo32.exe&#xff09; 命令执行&#x…...

编程日记 2025/8/27 1:07:23

[QMT量化交易小白入门]-四十二、五年年化收益率26%，当日未成交的下单，取消后重新委托

本专栏主要是介绍QMT的基础用法，常见函数，写策略的方法，也会分享一些量化交易的思路，大概会写100篇左右。 QMT的相关资料较少，在使用过程中不断的摸索，遇到了一些问题，记录下来和大家一起沟通，共同进步。 文章目录 相关阅读委托查询功能3.1 数据获取层3.2 数据结构初始…...

编程日记 2025/8/25 8:25:26

Windows版-RabbitMQ自动化部署

一键完成Erlang环境变量配置&#xff08;ERLANG_HOME系统变量&#xff09;‌ 一键完成RabbitMQ环境变量配置&#xff08;RabbitMQ系统变量&#xff09;‌ 实现快速安装部署RabbitMQ PS&#xff1a; 需提前下载安装&#xff1a; - otp_win64_25.0.exe (Erlang) - rabbit…...

编程日记 2026/1/30 2:46:40

openEuler24.03 LTS下安装Flink

目录 Flink的安装模式下载Flink安装Local模式前提条件解压安装包启动集群查看进程提交作业文件WordCount持续流WordCount 查看Web UI配置flink-conf.yaml简单使用 关闭集群 Standalone Session模式前提条件Flink集群规划解压安装包配置flink配置flink-conf.yaml配置workers配置…...

编程日记 2026/1/26 13:15:16

LeetCode热题100记录-【二分查找】

二分查找 35.搜索插入位置 思考&#xff1a;二分查找先判定边界条件 记录&#xff1a;不需要二刷 class Solution {public int searchInsert(int[] nums, int target) {int left 0,right nums.length-1;if(nums[right] < target){return right1;}if(nums[left] > tar…...

编程日记 2026/1/3 5:35:43

从零开始学java--泛型（1）

泛型 学生成绩可能是数字类型&#xff0c;也可能是字符串类型&#xff0c;如何存放可能出现的两种类型呢&#xff1a; public class Score {String name;String id;Object value; //因为Object是所有类型的父类&#xff0c;因此既可以存放Integer也能存放Stringpublic Score…...

编程日记 2026/1/26 3:37:00

【正点原子】STM32MP135去除SD卡引脚复用，出现 /dev/mmcblk1p5 not found！

如果在设备树中直接注释掉 sdmmc1 节点&#xff0c;就会导致系统启动时识别不到真正的 eMMC 设备&#xff0c;进而挂载失败&#xff0c;爆出 /dev/mmcblk1p5 not found 的问题。 正点原子STM32MP135开发板Linux核心板嵌入式ARM双千兆以太网CAN 正确操作是“放空”而不是“删光…...

编程日记 2026/1/31 12:16:07

CrystalDiskInfo电脑硬盘监控工具 v9.6.0中文绿色便携版

前言 CrystalDiskInfo是一个不用花钱的硬盘小帮手软件&#xff0c;它可以帮你看看你的电脑硬盘工作得怎么样&#xff0c;健不健康。这个软件能显示硬盘的温度高不高、还有多少地方没用、传输东西快不快等等好多信息。用了它&#xff0c;你就能很容易地知道硬盘现在是什么情况&…...

编程日记 2026/2/1 8:33:24

详解模型蒸馏，破解DeepSeek性能谜题

大家好&#xff0c;不少关注 DeepSeek 最新动态的朋友&#xff0c;想必都遇到过 “Distillation”&#xff08;蒸馏&#xff09;这一术语。本文将介绍模型蒸馏技术的原理&#xff0c;同时借助 TensorFlow 框架中的实例进行详细演示。通过本文&#xff0c;对模型蒸馏有更深的认识…...

编程日记 2026/1/31 3:33:03

⭐算法OJ⭐数据流的中位数【最小堆】Find Median from Data Stream

最小堆 最小堆是一种特殊的完全二叉树数据结构。 基本定义 堆性质&#xff1a;每个节点的值都小于或等于其子节点的值&#xff08;根节点是最小值&#xff09;完全二叉树性质&#xff1a;除了最底层外&#xff0c;其他层的节点都是满的&#xff0c;且最底层的节点都靠左排列…...

编程日记 2026/1/14 7:09:47

园区网拓扑作业

作业要求&#xff1a; 需求&#xff1a; 需求分析&#xff1a; 1.按照图示的VLAN及IP地址需求&#xff0c;完成相关配需&#xff1a;VLAN 2、3、20、30 已分配子网&#xff0c;需在交换机上创建 VLAN 并配置三层接口作为网关。确保各 VLAN 内设备能互通&#xff0c;跨 VLAN 通…...

编程日记 2026/1/29 11:28:01

隔行换色总结

功能效果展示&#xff1a; 第一种思路&#xff1a; 使用数组&#xff0c;将数组的内容渲染到页面上&#xff0c;序号也就是将数组的下标输出到第一个td上&#xff0c;将数组的内容输出到第二个td上&#xff0c;&#xff08;使用拼接字符串&#xff09; 具体操作&#xff1a; …...

编程日记 2026/1/29 2:06:05

使用Docker Desktop进行本地打包和推送

使用Docker Desktop进行本地打包和推送 一、Docker Desktop配置二、IDEA配置1.下载Docker插件2.在“Settings”中&#xff0c;配置“Docker”3.选择“Docker Registry”&#xff0c;配置远程仓库。 三、POM配置 一共有三个地方需要配置 一、Docker Desktop配置 在Docker Deskt…...

编程日记 2026/1/28 3:32:21

MTO和MTS不同模式制造业数字化转型的“三座大山“：MES/ERP/PLM系统集成技术全解析

1.导言&#xff1a;制造业的数字化转型与集成系统的作用 在工业4.0浪潮的推动下&#xff0c;制造业正处于深刻的数字化转型之中。这场变革的核心在于利用先进技术&#xff0c;如物联网&#xff08;IoT&#xff09;、人工智能&#xff08;AI&#xff09;、大数据分析和云计算&a…...

编程日记 2026/1/13 13:10:03

Redis主从复制：告别单身Redis！

目录 一、 为什么需要主从复制&#xff1f;&#x1f914;二、 如何搭建主从架构&#xff1f;前提条件✅步骤&#x1f4c1; 创建工作目录&#x1f4dc; 创建 Docker Compose 配置文件&#x1f680; 启动所有 Redis&#x1f50d; 验证主从状态 &#x1f4a1; 重要提示和后续改进 …...

编程日记 2026/1/31 4:34:48

数据库管理工具实战：IDEA 与 DBeaver 连接 TDengine（二）

五、DBeaver 连接 TDengine 实战 5.1 安装 DBeaver 下载安装包&#xff1a;访问 DBeaver 官方网站&#xff08;https://dbeaver.io/download/ &#xff09;&#xff0c;根据你的操作系统选择合适的安装包。如果是 Windows 系统&#xff0c;下载.exe 格式的安装文件&#xff1…...

编程日记 2025/11/30 3:41:21