一、简单介绍canvas元素
<canvas…/>是HTML5新增的一个元素，该元素用于绘制图形。实际上<canvas../>只是相当于一张画布。
它除了可以指定通用属性外，还可以指定 height 和 weight 两个属性。
在HTML网页上定义<canvas…/>元素之后，它只是一张“空白”的画布，画布上面一片空白。为了向画布上绘图，必须经过如下三步：
(1)获取<canvas…/> 元素对应的DOM对象，这是一个Canvas对象。
(2)调用Canvas对象的 getContext() 方法，该方法返回一个 CanvasRenderingContext2D对象，该对象即可绘制图形。
(3)调用CanvasRenderingContext2D对象的方法绘图。
1、下面的实例绘制了一个红色矩形：
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 画图入门 </title>
</head>
<body>
<h2> 画图入门 </h2>
<canvas id="mc" width="300" height="180"
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 = '#f00';
// 绘制矩形
ctx.fillRect(30 , 40 , 80 , 100);
</script>
</body>
</html>
2、绘制三角形形状：
<script type="text/javascript">
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.lineTo(10,10);
cxt.stroke();
cxt.closePath();
cxt.fill();
</script>
结果图：
3、绘制字符串
CanvasRenderingContext2D为绘制文字提供了如下两个方法：
- fillText(String text, float x, float y, [float maxWidth]) ：填充字符串；
- strokeText()(String text, float x, float y, [float maxWidth]) ： 绘制字符串边框；
CanvasRenderingContext2D 还设置了如下两个属性：
- textAlign ：字符串的对齐方式，属性值为：start、end、left、right、center等属性值。
- textBaseAlign ：绘制字符串的垂直对齐方式，属性值为：top、hanging、middle、alphabetic、idecgraphic、bottom等。
下面代码示例了如何利用 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>
显示效果为：
4、设置阴影
- CanvasRenderingContext2D 为设置图形阴影提供了如下属性：
- shadowBlur：设置阴影的模糊度。该属性值是一个浮点数，该数值越大，阴影的模糊程度就越大；
- shadowColor：设置阴影的颜色；
- shadowOffsetX：设置阴影在X方向的偏移
- shadowOffsetY：设置阴影在Y方向的偏移
下面程序代码示范了为绘制的图形添加阴影：
<script type="text/javascript">
// 获取canvas元素对应的DOM对象
var canvas = document.getElementById('mc');
// 获取在canvas上绘图的CanvasRenderingContext2D对象
var ctx = canvas.getContext('2d');
// 设置阴影的模糊度
ctx.shadowBlur = 5.6;
// 设置阴影颜色
ctx.shadowColor = "#222";
// 设置阴影在X、Y方法上的偏移
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = -6;
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);
// 填充一个矩形区域
ctx.fillRect(20 , 150 , 180 , 80);
ctx.lineWidth = 8;
// 绘制一个矩形边框
ctx.strokeRect(300 , 150 , 180 , 80);
</script>
显示效果为：
————————————————–未完待续————————————-
