HTML5新增了一个<canvas.../>属性。该元素自身并不绘制图形，只是相当于一张空画布。如果开发者需要向<canvas.../>上绘制图形则必须使用JavaScript脚本进行绘制。

为了向<canvas.../>元素上绘图，必须经过如下3步。

获取<canvas.../>元素对应的DOM对象，这是一个Canvas对象。
调用Canvas对象的getContext()方法，该方法返回一个CanvasRenderingContext2D对象，该对象即可绘制图形。
调用CanvasRenderingContext2D对象的方法绘图。

绘制字符串：

fillText(String text,double x,double y,[double maxWidth]):填充字符串。
strokeText(String text,double x,double y,[double maxWidth]):绘制字符串边框。

为了设置绘制字符串时使用的字体对齐方式，CanvasRenderingContext2D还提供了如下两个属性：

textAlign:设置绘制字符串的水平对齐方式，该属性支持start,end,left,right,center等属性。
textBaseAlign:设置绘制字符串的垂直对齐方式，该属性支持top,hanging,middle,alphabetic,idecgraphic,bottom等属性值。

下面程序代码示范了如何利用Canvas来绘制字符串。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 绘制文字 </title>
</head>
<body>
<h2> 绘制文字 </h2>
<canvas id="mc" width="600" height="280"
	style="border:1px solid black"></canvas>
<script type="text/javascript">
	// 获取canvas元素对应的DOM对象
	var canvas = document.getElementById('mc');
	// 获取在canvas上绘图的CanvasRenderingContext2D对象
	var ctx = canvas.getContext('2d');
	ctx.fillStyle = '#00f';
	ctx.font = 'italic 50px 隶书';
	ctx.textBaseline = 'top';
	// 填充字符串
	ctx.fillText('疯狂Java讲义', 0, 0);
	ctx.strokeStyle = '#f0f';
	ctx.font='bold 45px 宋体';
	// 绘制字符串的边框
	ctx.strokeText('轻量级Java EE企业应用实战', 0, 50);
</script>
</body>
</html>

效果图：

前端--HTML5绘制字符串

绘制字符串：

猜你喜欢