canvas自定义扩展方法:文字自动换行
查看专栏目录
canvas实例应用100+专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重要的帮助。
文章目录
- 示例效果图
- 示例源代码(共86行)
- canvas基本属性
- canvas基础方法
在上一篇文章中,我们了解了 canvas如何新增属性和方法来自定义扩展,这篇文章,我们引用别人的一个扩展方法,文字自动换行。具体的使用示例,请参考示例源代码。进一步的讲解,请参考后面的参考资料链接。
示例效果图
示例源代码(共86行)
/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-02-01
*/
<template><div class="djs_container"><div class="top"><h3>canvas自定义扩展:文字自动换行</h3><div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div><h4><el-button type="primary" size="mini" @click="draw()">绘制</el-button><el-button type="danger" size="mini" @click="clearCanvas()">清除</el-button></h4></div><div class="dajianshi "><canvas id="dajianshi" ref="mycanvas" width="980" height="490"></canvas></div></div>
</template>
<script>export default {data() {return {ctx: null,canvas: null,}},mounted() {this.setCanvas()},methods: {clearCanvas() {this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);},setCanvas() {this.canvas = document.getElementById('dajianshi');if (!this.canvas.getContext) return;this.ctx = this.canvas.getContext("2d");CanvasRenderingContext2D.prototype.wrapText = function(text, x, y, maxWidth, lineHeight) {if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {return;}var context = this;var canvas = context.canvas;if (typeof maxWidth == 'undefined') {maxWidth = (canvas && canvas.width) || 300;}if (typeof lineHeight == 'undefined') {lineHeight = (canvas && parseInt(window.getComputedStyle(canvas).lineHeight)) || parseInt(window.getComputedStyle(document.body).lineHeight);}// 字符分隔为数组var arrText = text.split('');var line = '';for (var n = 0; n < arrText.length; n++) {var testLine = line + arrText[n];var metrics = context.measureText(testLine);var testWidth = metrics.width;if (testWidth > maxWidth && n > 0) {context.fillText(line, x, y);line = arrText[n];y += lineHeight;} else {line = testLine;}}context.fillText(line, x, y);};},draw() {let txt='还是大剑师兰特:美国某知名大学研究生,专业的航天航海交通领域高级前端开发工程师,从事GIS、物联网行业多年,深耕vue+openlayers,vue+cesium,vue+mapbox,vue+leaflet等领域。'this.ctx.fillStyle = 'orange';this.ctx.font = '28px STheiti, SimHei';this.ctx.wrapText(txt, 340, 100, 400, 50)},}}
</script>
<style scoped>.djs_container {width: 1000px;height: 680px;margin: 50px auto;border: 1px solid #991188;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: #991188;color: #fff;}.dajianshi {margin: 5px auto 0;border: 1px solid #ccc;width: 980px;height: 490px;background-color: #eee;}
</style>
参考资料:
https://www.zhangxinxu.com/wordpress/2018/02/canvas-text-break-line-letter-spacing-vertical/
canvas基本属性
属性 | 属性 | 属性 |
---|---|---|
canvas | fillStyle | filter |
font | globalAlpha | globalCompositeOperation |
height | lineCap | lineDashOffset |
lineJoin | lineWidth | miterLimit |
shadowBlur | shadowColor | shadowOffsetX |
shadowOffsetY | strokeStyle | textAlign |
textBaseline | width |
canvas基础方法
方法 | 方法 | 方法 |
---|---|---|
arc() | arcTo() | addColorStop() |
beginPath() | bezierCurveTo() | clearRect() |
clip() | close() | closePath() |
createImageData() | createLinearGradient() | createPattern() |
createRadialGradient() | drawFocusIfNeeded() | drawImage() |
ellipse() | fill() | fillRect() |
fillText() | getImageData() | getLineDash() |
isPointInPath() | isPointInStroke() | lineTo() |
measureText() | moveTo() | putImageData() |
quadraticCurveTo() | rect() | restore() |
rotate() | save() | scale() |
setLineDash() | setTransform() | stroke() |
strokeRect() | strokeText() | transform() |
translate() |
相关文章:

canvas自定义扩展方法:文字自动换行
查看专栏目录 canvas实例应用100专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重…...

【2024全网最详细】Google 搜索命令终极指南
💂 个人网站:【 海拥】【神级代码资源网站】【办公神器】🤟 基于Web端打造的:👉轻量化工具创作平台💅 想寻找共同学习交流的小伙伴,请点击【全栈技术交流群】 你是否尝试过使用 Google 搜索作为免费的 SEO …...

R-kknn包-类别插值可视化绘制
前面的推文我们介绍了使用scikit-learn结合分类散点数据,构建机器学习分类模型并将模型结果可视化展示,具体链接如下: 机器学习和可视化还能一起这样用?Python教你全搞定。今天这篇推文,我们就使用R语言的kknn包进行类…...

探究HMAC算法:消息认证与数据完整性的完美结合
Hash-based Message Authentication Code(基于哈希的消息认证码,简称HMAC)算法作为一种广泛应用的消息认证码(MAC)算法,在现代信息安全领域起着至关重要的作用。本文将从算法原理、优缺点、实际应用等方面&…...

10s 内得到一个干净、开箱即用的 Linux 系统
安装 使用官方脚本安装我的服务器不行 官方脚本 mkdir instantbox && cd $_ bash <(curl -sSL https://raw.githubusercontent.com/instantbox/instantbox/master/init.sh) 下面是我的完整安装过程 mkdir /opt/instantbox cd /opt/instantbox 1.脚本文件 (这个没…...

轮转数组[中等]
优质博文:IT-BLOG-CN 一、题目 给定一个整数数组nums,将数组中的元素向右轮转k个位置,其中k是非负数。 示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步: [7,1,2,3,4,5,6] 向右轮转 2 步: [6,7,1,2,…...

【SpringBoot系列】自动装配的魅力:Spring Boot vs 传统Spring
IT行业有哪些证书含金量高? 文章目录 IT行业有哪些证书含金量高?强烈推荐前言区别项目配置:依赖管理:内嵌服务器:开发体验: 实例Spring项目示例:Spring Boot项目示例: 总结强烈推荐专栏集锦写在最后 强烈…...

idea自动生成实体类
第一步:idea连接数据库 出现这个就连接成功 第二步:选择数据库 第三步:创建实体类 也可以点击数据库一下子全部创建 选择创建实体类所放位置 这样就完成了,点击看看对其做相应修改...
uniapp -- picker民族选择器
目录 一、实现思路 二、实现步骤 ①view部分展示 ② JavaScript 内容 ③css中样式展示 三、效果展示...
生信学习笔记1:学习如何用OPLS-DA分析代谢组数据(从入门到掌握)
偏最小二乘法(PLS)和正交偏最小二乘法(OPLS)是统计模型,用于寻找两组数据矩阵之间的关系。它们广泛应用于化学计量学、生物信息学、经济预测等领域。 偏最小二乘法(PLS) 偏最小二乘法是一种多变量分析方法,主要用于找到两组数据(通常是预测变量集和响应变量集)之间…...

CDR2024最新版本怎么下载?Coreldraw相关快捷键教程分享
想必从事平面设计的大咖们都知道,Coreldraw是一款优秀的图形设计软件,被广泛地运用在平面设计、包装设计、服装设计各个生活领域,因此了解一些关于CorelDRAW快捷键的知识是很有必要的。因为使用快捷键不仅使用起来方便快捷,而且提…...

C语言实战项目<贪吃蛇>
我们这篇会使用C语言在Windows环境的控制台中模拟实现经典小游戏贪吃蛇 实现基本的功能: 结果如下: 1.一些Win32 API知识 本次实现呢我们会用到一些Win32 API的知识(WIN32 API也就是Microsoft Windows 32位平台的应用程序编程接口): 1)控制窗口大小 我们可以使用…...

人工智能时代:AI提示工程的奥秘 —— 驾驭大语言模型的秘密武器
文章目录 一、引言二、提示工程与大语言模型三、大语言模型的应用实践四、策略与技巧五、结语《AI提示工程实战:从零开始利用提示工程学习应用大语言模型》亮点内容简介作者简介目录获取方式 一、引言 随着人工智能技术的飞速发展,大语言模型作为一种新…...

Idea编写mapper.xml文件提示表名和字段
一、连接database 二、setting- > language -> sql Dialects中 的选项设为 mysql就可以了 三、测试...

解密人工智能:探索机器学习奥秘
🌈个人主页:聆风吟 🔥系列专栏:网络奇遇记、数据结构 🔖少年有梦不应止于心动,更要付诸行动。 文章目录 📋前言一. 机器学习的定义二. 机器学习的发展历程三. 机器学习的原理四. 机器学习的分类…...

C语言第十四弹---函数递归
✨个人主页: 熬夜学编程的小林 💗系列专栏: 【C语言详解】 【数据结构详解】 函数递归 1、递归是什么? 1.1、递归的思想 1.2、递归的限制条件 2、递归举例 2.1、举例1:求n的阶乘 2.1.1、分析和代码实现 2.1.2、…...

etcd自动化安装配置教程
文章目录 前言一、简介1. 简介2. 特点3. 端口介绍 二、etcd安装教程(单机版)1. 复制脚本2. 增加执行权限3. 执行脚本4. 查看启动状态5. 卸载etcd 三、etcd安装教程(集群版)1. 复制脚本2. 增加执行权限3. 分发脚本4. 执行脚本5. 启…...

时间序列预测——GRU模型
时间序列预测——GRU模型 在深度学习领域,循环神经网络(RNN)是处理时间序列数据的一种常见选择。上期已介绍了LSTM的单步和多步预测。本文将深入介绍一种LSTM变体——门控循环单元(GRU)模型,包括其理论基础…...

通用CI/CD软件平台TeamCity全新发布v2023.11——增强Git托管平台的集成
TeamCity是一个通用的 CI/CD 软件平台,可以实现灵活的工作流、协作和开发做法。我们的解决方案将帮助在您的 DevOps 流程中成功实现持续集成、持续交付和持续部署。 TeamCity 2023.11正式版下载 TeamCity 2023.11 带来了矩阵构建和构建缓存等多项备受期待的功能&a…...
C语言:register类型变量
register—— 寄存器存储 register 是 C 语言中的一种存储类别(Storage Class),它用于告诉编译器将变量存储在寄存器中。在 C 语言中,变量的存储位置可以是寄存器、堆栈或静态存储区,使用 register 存储类别可以帮助我…...

业务系统对接大模型的基础方案:架构设计与关键步骤
业务系统对接大模型:架构设计与关键步骤 在当今数字化转型的浪潮中,大语言模型(LLM)已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中,不仅可以优化用户体验,还能为业务决策提供…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO:支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题:MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者:Yanyuan Chen, Dexuan Xu, Yu Hu…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》
引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例,模拟20个网页的爬取,每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程:允许程序同时执行多个任务,提高IO密集型任务(如网络请求)的效率…...

Map相关知识
数据结构 二叉树 二叉树,顾名思义,每个节点最多有两个“叉”,也就是两个子节点,分别是左子 节点和右子节点。不过,二叉树并不要求每个节点都有两个子节点,有的节点只 有左子节点,有的节点只有…...

深度学习习题2
1.如果增加神经网络的宽度,精确度会增加到一个特定阈值后,便开始降低。造成这一现象的可能原因是什么? A、即使增加卷积核的数量,只有少部分的核会被用作预测 B、当卷积核数量增加时,神经网络的预测能力会降低 C、当卷…...

【7色560页】职场可视化逻辑图高级数据分析PPT模版
7种色调职场工作汇报PPT,橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版:职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...
C++.OpenGL (14/64)多光源(Multiple Lights)
多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...
JavaScript基础-API 和 Web API
在学习JavaScript的过程中,理解API(应用程序接口)和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能,使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...