查看专栏目录

canvas实例应用100+专栏，提供canvas的基础知识，高级动画，相关应用扩展等信息。canvas作为html的一部分，是图像图标地图可视化的一个重要的基础，学好了canvas，在其他的一些应用上将会起到非常重要的帮助。

如何使用canvas测量一串文字的长度呢？canvas中提供了一个方法measureText，他的测量是非常准确的。

提醒： 在制作这个示例的时候，出现了顺序上的错误，将ctx.font放到了ctx.measureText()的后面，致使测量的数据长度值不正确。 正确节奏是 先设定字体大小，然后再测量长度。

另外从这个乌龙事件中，学到了一点知识：

.element {
font-size: medium;
}
const measureElement = document.querySelector(‘.element’);
let fontSize = parseInt(getComputedStyle(measureElement).fontSize);
首先使用 document.querySelector() 方法选择具有类名为 .element 的元素。
然后，使用 getComputedStyle() 方法获取该元素的计算样式，即应用于该元素的实际样式。
最后，使用 parseInt() 方法将获取到的字体大小值转换为整数。

示例效果图

示例源代码（共89行）

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-01-31
*/
<template><div class="djs_container"><div class="top"><h3>canvas 测量文字长度（measureText）</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");},draw() {this.ctx.fillStyle = 'orange';this.ctx.font = '50px STheiti, SimHei';let txt='还是大剑师兰特';let clValue=this.ctx.measureText(txt);this.ctx.fillText(txt, 340, 200,)// 显示宽度this.ctx.font = '12px Arial';this.ctx.fillStyle = 'red';this.ctx.fillText('宽' + clValue.width, 340 + clValue.width,200);let aaa = getComputedStyle(this.canvas)console.log(aaa)this.ctx.fillText('canvas设定的文字大小' + aaa.fontSize, 340 ,300);},}}
</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;canvas{ font-size:20px;}	}
</style>

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