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基本属性

属性属性属性
canvasfillStylefilter
fontglobalAlphaglobalCompositeOperation
heightlineCaplineDashOffset
lineJoinlineWidthmiterLimit
shadowBlurshadowColorshadowOffsetX
shadowOffsetYstrokeStyletextAlign
textBaselinewidth

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()

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

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

相关文章

Android进阶之路 - ViewPager2 比 ViewPager 强在哪?

我记得前年&#xff08;2022&#xff09;面试的时候有被问到 ViewPager 和 ViewPager2 有什么区别&#xff1f;当时因为之前工作一直在开发售货机相关的项目&#xff0c;使用的技术要求并不高&#xff0c;所以一直没去了解过 ViewPager2~ 去年的时候正好有相关的功能需求&#…

JavaScript入门

第二个知识点&#xff1a;javascript的基本语法 定义变量 在JavaScript里面&#xff0c;没有int&#xff0c;string 之类的数据类型&#xff0c;只有 var var num 1; var string "天玄地号"; 在javascript中&#xff0c;写完一句语句之后可以不加分号&#xff…

【lesson30】MySQL事务一致性和再次理解隔离性

文章目录 一致性(Consistency)如何理解隔离性2数据库并发的场景有三种&#xff1a;读-写3个记录隐藏列字段undo log日志模拟 MVCC思考Read ViewRR 与 RC的本质区别测试RR 与 RC的本质区别分析 一致性(Consistency) 事务执行的结果&#xff0c;必须使数据库从一个一致性状态&am…

【Java】实现图书管理系统

文章目录 1. 设计背景2. 需求分析3. 设计思路4. 实现4.1 book包4.1.1 Book类4.1.2 BookList类(书架) 4.2 user包4.2.1 User 类4.2.2 AdminUser类&#xff08;管理员用户&#xff09;4.2.3 NormalUser类&#xff08;普通用户&#xff09; 4.3 operation包4.3.1 IOPeration接口4.…

企业数字化转型有哪些难点?

企业数字化转型虽然带来诸多好处&#xff0c;但往往是一个复杂且充满挑战的过程。以下是组织在数字化转型计划中可能面临的一些常见困难&#xff1a; 1.抵制变革&#xff1a; 员工抵制&#xff1a;员工可能会抵制对其既定工作流程、工具和流程的更改。人们可能会担心工作被取…

周期承压下的徐工机械:收入持续负增长,大肆并购风险犹存

撰稿|行星 来源|贝多财经 工程机械行业的发展程度是衡量工业化水平的关键指标&#xff0c;亦是一直以来备受国家与市场关注的高成长板块。 在探索新发展增量的大军中&#xff0c;徐工机械&#xff08;SZ:000425&#xff09;活跃工程机械市场&#xff0c;寻求着利润与品质的最…

在 python 中调用 C/C++

Python 是一种很好用的胶水语言&#xff0c;利用Python的简洁和C的高效&#xff0c;基本可以解决99%的问题了&#xff0c;剩下那 1% 的问题也就不是问题了&#xff0c;毕竟不是所有问题都可解。 一般的&#xff0c;Python和C的交互分为这两种情况&#xff1a; 用C扩展Python&…

【开源】SpringBoot框架开发海南旅游景点推荐系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用户端2.2 管理员端 三、系统展示四、核心代码4.1 随机景点推荐4.2 景点评价4.3 协同推荐算法4.4 网站登录4.5 查询景点美食 五、免责说明 一、摘要 1.1 项目介绍 基于VueSpringBootMySQL的海南旅游推荐系统&#xff…

AI的安全应答之道

作者&#xff1a;统信UOS技术团队 2023,随着各种大语言模型的爆发&#xff0c;整个AI生态正处于从决策式AI进化到生成式AI的进程中。各类AI模型和AI应用层出不穷&#xff0c;也随之带来了与AI相关的各类潜在风险。AI开发和使用过程中的风险防范和治理&#xff0c;成为了不可忽…

中国传媒网CEO徐晓艺荣膺第九届金鸥奖“2023年度最佳创新人物”殊荣

2023年是不平凡的一年,风云变幻。大国经济有韧性,离不开顶层设计、宏观政策的指挥,也离不开千百万求新求变的企业和企业家们的辛勤耕耘。在经历了三年疫情严峻考验的当下,中国号巨轮迎风搏浪心如磐石,无惧险阻屹立潮头,这不仅是中国红的底色,也是中国企业家的坚守和倔强。2023年…

linux+rv1126/imx6ull:opencv静态库交叉编译

目录 1.下载 2.准备工作 2.1安装依赖环境 2.2安装Cmake 2.3 解压opencv 3.Cmake设置 3.1文件夹选择 1&#xff09;进入源码根目录 2&#xff09;运行cmake 3&#xff09;选择目录 4&#xff09;进入配置界面 5&#xff09;查找编译器 6&#xff09;配置编译器 3.…

开源模型应用落地-业务优化篇(三)

一、前言 假如您跟随我的脚步&#xff0c;学习到上一篇的内容&#xff0c;到这里&#xff0c;相信细心的您&#xff0c;已经发现了&#xff0c;在上一篇中遗留的问题。那就是IM服务过载的时候&#xff0c;如何进行水平扩容&#xff1f; 因为在每个IM服务中&#xff0c;我们用JV…