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>
效果图: