永久免费的网站,合肥网站建设企业,网站项目名称,公司简介模板素材查看专栏目录 canvas实例应用100专栏#xff0c;提供canvas的基础知识#xff0c;高级动画#xff0c;相关应用扩展等信息。canvas作为html的一部分#xff0c;是图像图标地图可视化的一个重要的基础#xff0c;学好了canvas#xff0c;在其他的一些应用上将会起到非常重…
查看专栏目录 canvas实例应用100专栏提供canvas的基础知识高级动画相关应用扩展等信息。canvas作为html的一部分是图像图标地图可视化的一个重要的基础学好了canvas在其他的一些应用上将会起到非常重要的帮助。 文章目录 示例效果图示例源代码共86行canvas基本属性canvas基础方法 在上一篇文章中我们了解了
canvas如何新增属性和方法来自定义扩展这篇文章我们引用别人的一个扩展方法文字自动换行。具体的使用示例请参考示例源代码。进一步的讲解请参考后面的参考资料链接。 示例效果图 示例源代码共86行
/*
* Author: 大剑师兰特xiaozhuanlan还是大剑师兰特CSDN
* 此源代码版权归大剑师兰特所有可供学习或商业项目中借鉴未经授权不得重复地发表到博客、论坛问答git等公共空间或网站中。
* Email: 2909222303qq.com
* weixin: gis-dajianshi
* First published in CSDN
* First published time: 2024-02-01
*/
templatediv classdjs_containerdiv classtoph3canvas自定义扩展文字自动换行/h3div大剑师兰特, 还是大剑师兰特gis-dajianshi/divh4el-button typeprimary sizemini clickdraw()绘制/el-buttonel-button typedanger sizemini clickclearCanvas()清除/el-button/h4/divdiv classdajianshi canvas iddajianshi refmycanvas width980 height490/canvas/div/div
/template
scriptexport 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、物联网行业多年深耕vueopenlayersvuecesiumvuemapboxvueleaflet等领域。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基本属性
属性属性属性canvasfillStylefilterfontglobalAlphaglobalCompositeOperationheightlineCaplineDashOffsetlineJoinlineWidthmiterLimitshadowBlurshadowColorshadowOffsetXshadowOffsetYstrokeStyletextAligntextBaselinewidth
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()
