Canvas画布进阶篇---绘制文本

最新推荐文章于 2025-05-16 07:34:02 发布

原创最新推荐文章于 2025-05-16 07:34:02 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Canvas #HTML5 #JavaScript #Canvas竖线图

HTML5 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍Canvas中文本绘制的方法，包括fillText和strokeText函数的使用，以及文本对齐和基准线的设置。并通过一个具体的竖线图表案例，展示如何在Canvas中实现数据可视化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、描绘文本概述

文本绘制相关的方法
方法	说明
context.fiilText(text,x,y)	描绘文本
context.fillText(text,x,y,maxWidth)	描绘文本
context.strokeText(text,x,y)	描绘文本的轮廓
context.strokeText(text,x,y,maxWidth)	描绘文本的轮廓

fillText()方法与strokeText()方法都至少需要三个参数。参数text是将要描绘的文本，参数x与y指定了描绘位置的坐标。默认的情况下，以描绘对象文本的左下为基准。参数maxWidth是可选的，其指定数值后，文本将显示在指定的宽度内，可缩小显示。

文本绘制相关的属性
属性	说明
context.font	定义文本的样式。与css的font属性的内容相同
context.textAlign	定义文本的对齐方式，可指定start,,end,left,right,center
context.textBaseline	定义文本的基准线，可指定top,hanging,middle,alphabetic,bottom等

这些属性在Firefox3.6、Safari5、Chrome5、Opera10.50、IE10及以上版本的浏览器中可以使用。

支持maxWidth参数的浏览器只有Firefox(3.6以后)与Opera(10.50以后)，Safari5以及Chrome5中将忽略maxWidth参数。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>maxWidth参数在各个浏览器中的表现</title>
<style type="text/css">
	canvas{border: 1px solid black;}
</style>
<script type="text/javascript">
	(function(){
		//页面导入时的事件处理
		window.addEventListener("load",function(){
			//获取canvas以及上下文对象
			var canvas=document.getElementById("canvas");
			var ctx=canvas.getContext("2d");
			//文本的定义
			var text="在Canvas中进行文本描绘";
			//定义文本的字型
			ctx.font="24px 'Arial'";
			//描绘文本的轮廓
			ctx.strokeStyle="blue";
			ctx.strokeText(text,10,40);
			//描绘文字
			ctx.fillStyle="red";
			ctx.fillText(text,10,85);
			//固定宽度
			ctx.fillStyle="green";
			ctx.fillText(text,10,130,150);
		},false);
	})();
</script>
</head>

<body>
<canvas id="canvas" width="300" height="150"></canvas>
</body>
</html>

如今一般现在使用的浏览器都支持maxWidth参数。

2、对齐方式

textAlign属性中指定left时左对齐，指定right时右对齐，指定为center时居中，指定为start时将与对应语言的开始位置对齐，指定为end时将与对应语言的结束位置对齐。默认值为start。

实际在Canvas中绘制文本时，因为有时候比较难计算左下方坐标。往往以右侧坐标或者中心坐标为基准绘制会更方便。

//简单的说，下图三个点代表着分别为left/strat,center,right/end（left != start || right != end）要计算的坐标（x,y）,即fillText()与strokeText()的参数x,y。

3、基准线

textAlign属性用于定义文本的水平方向的基线，垂直方向使用textBaseline属性来定义。可在textBaseline属性中可指定top（表意字顶端），middle（表意字中央），bottom（表意字底部），hanging（罗马字上缘），alphabetic（罗马字基线），ideographic（罗马字下缘）等。

下图，黑点从上往下依次代表top,middle,bottom；红点从上往下依次代表hanging,alphabetic,ideographic。

4、案例：绘制竖线图表

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>绘制竖线图表</title>
<script type="text/javascript">
	(function(){
		//canvas元素的根对象
		var canvas=null;
		//上下文对象
		var ctx=null;
		//------页面导入时的事件处理
		add_even_listener(window,"load",function(){
			//取得canvas根对象 
			canvas=document.getElementById("canvas");
			//table元素对象
			var tbl=document.getElementById("tbl");
			//绘制图表
			draw_graph(tbl,canvas);
		});
		//------图表绘制
		function draw_graph(tbl,canvas){
			//获取上下文对象
			ctx=canvas.getContext("2d");
			//获取横轴的显示文字
			var head_cells=tbl.tHead.rows[0].cells;
			var heads=[];
			for(var i=1;i<head_cells.length;i++){
				heads.push(head_cells[i].innerHTML);
			}
			//取得值，计算最大值
			var max=0;
			var value_cells=tbl.tBodies[0].rows[0].cells;
			var values=[];
			for(var i=1;i<value_cells.length;i++){
				var v=value_cells[i].innerHTML;
				v=parseInt(v.replace(/[^\d]/g,""));
				values.push(v);
				if(v>max){max=v;}
			}
			//定义图表原点
			var basex=parseInt(canvas.width*0.1);
			var basey=parseInt(canvas.height*0.8);
			//计算图表的宽度与高度
			var gw=parseInt(canvas.width*0.8);
			var gh=parseInt(canvas.height*0.7);
			//绘制图表区域的背景
			ctx.fillStyle="#eeeeee";
			ctx.fillRect(basex,basey-gh,gw,gh);
			//显示轴
			ctx.beginPath();
			ctx.moveTo(basex,basey-gh);
			ctx.lineTo(basex,basey);
			ctx.lineTo(basex+gw,basey);
			ctx.strokeStyle="#000000";
			ctx.stroke();
			//定义文字的字型
			ctx.font="12px 黑体";
			//描绘图表
			for(var i=0;i<heads.length;i++){
				//取得图标的值
				var v=values[i];
				//竖线中心x坐标
				var x=basex+(gw/heads.length)*i+((gw/heads.length)/2);
				//定义竖线的宽度
				var barw=(gw/heads.length)*0.7;
				//计算竖线的高度
				var barh=gh*0.9*(v/max);
				//绘制竖线
				ctx.fillStyle="green";
				ctx.fillRect(x-barw/2,basey-barh,barw,barh);
				//检查fillText()方法是否存在
				if(!ctx.fillText){continue;}
				//间隔与值的显示宽度的最大许可值
				var tw=(gw/heads.length)*0.9;
				//将文本的坐标基准设置为center
				ctx.textAlign="center";
				//绘制x轴
				ctx.textBaseline="top";
				ctx.fillStyle="black";
				ctx.fillText(heads[i],x,basey+3,tw);
				//绘制值
				ctx.textBaseline="ideographic";
				ctx.fillStyle="black";
				ctx.fillText(v,x,basey-barh-3,tw);
			}
		}
		//------设置事件侦听
		function add_even_listener(elm,type,func){
			if(!elm){return false;}
			if(elm.addEventListener){
				elm.addEventListener(type,func,false);
			}else if(elm.attachEvent){
				elm.attachEvent('on'+type,func);
			}else{
				return false;
			}
		}
	})();
</script>
</head>

<body>
<canvas id="canvas" width="400" height="300"></canvas>
<table id="tbl">
	<caption>会员数的变化</caption>
	<thead>
		<tr>
			<th>公元</th>
			<th>2012年</th>
			<th>2013年</th>
			<th>2014年</th>
			<th>2015年</th>
			<th>2016年</th>
			<th>2017年</th>
			<th>2018年</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>会员数</th>
			<td>450</td>
			<td>673</td>
			<td>745</td>
			<td>850</td>
			<td>973</td>
			<td>1230</td>
			<td>1450</td>
		</tr>
	</tbody>
</table>
</body>
</html>