HTML5的绘图的支持

一、简单介绍canvas元素

 <canvas.../>是HTML5新增的一个元素，该元素用于绘制图形。实际上<canvas../>只是相当于一张画布。

它除了可以指定通用属性外，还可以指定 height 和 weight 两个属性。

在HTML网页上定义<canvas.../>元素之后，它只是一张“空白”的画布，画布上面一片空白。为了向画布上绘图，必须经过如下三步：

(1)获取<canvas.../> 元素对应的DOM对象，这是一个Canvas对象。

(2)调用Canvas对象的 getContext() 方法，该方法返回一个 CanvasRenderingContext2D对象，该对象即可绘制图形。

(3)调用CanvasRenderingContext2D对象的方法绘图。

 1、下面的实例绘制了一个红色矩形：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
 5         <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
 6         <title> 画图入门 </title>
 7     </head>
 8     <body>
 9         <h2> 画图入门 </h2>
10         <canvas id="mc" width="300" height="180"
11             style="border:1px solid black"></canvas>
12         <script type="text/javascript">
13             // 获取canvas元素对应的DOM对象
14             var canvas = document.getElementById('mc');
15             // 获取在canvas上绘图的CanvasRenderingContext2D对象
16             var ctx = canvas.getContext('2d');
17             // 设置填充颜色
18             ctx.fillStyle = '#f00';
19             // 绘制矩形
20             ctx.fillRect(30 , 40 , 80 , 100);
21         </script>
22     </body>
23 </html>

 

 2、绘制三角形形状：

 1 <script type="text/javascript">
 2     cxt.fillStyle="#FF0000";
 3     cxt.beginPath();
 4     cxt.moveTo(10,10);
 5     cxt.lineTo(150,50); 
 6     cxt.lineTo(10,50);
 7     cxt.lineTo(10,10); 
 8     cxt.stroke();
 9     cxt.closePath(); 
10     cxt.fill();
11 </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 来绘制字符串。

 1 <script type="text/javascript">
 2     // 获取canvas元素对应的DOM对象
 3     var canvas = document.getElementById('mc');
 4     // 获取在canvas上绘图的CanvasRenderingContext2D对象
 5     var ctx = canvas.getContext('2d');
 6     ctx.fillStyle = '#00f';
 7     ctx.font = 'italic 50px 隶书';
 8     ctx.textBaseline = 'top';
 9     // 填充字符串
10     ctx.fillText('疯狂Java讲义', 0, 0);
11     ctx.strokeStyle = '#f0f';
12     ctx.font='bold 45px 宋体';
13     // 绘制字符串的边框
14     ctx.strokeText('轻量级Java EE企业应用实战', 0, 50);
15 </script>

 

显示效果为：

4、设置阴影

  • CanvasRenderingContext2D 为设置图形阴影提供了如下属性：
  • shadowBlur：设置阴影的模糊度。该属性值是一个浮点数，该数值越大，阴影的模糊程度就越大；
  • shadowColor：设置阴影的颜色；
  • shadowOffsetX：设置阴影在X方向的偏移
  • shadowOffsetY：设置阴影在Y方向的偏移

下面程序代码示范了为绘制的图形添加阴影：

 1 <script type="text/javascript">
 2     // 获取canvas元素对应的DOM对象
 3     var canvas = document.getElementById('mc');
 4     // 获取在canvas上绘图的CanvasRenderingContext2D对象
 5     var ctx = canvas.getContext('2d');
 6     // 设置阴影的模糊度
 7     ctx.shadowBlur = 5.6;
 8     // 设置阴影颜色
 9     ctx.shadowColor = "#222";
10     // 设置阴影在X、Y方法上的偏移
11     ctx.shadowOffsetX = 10;
12     ctx.shadowOffsetY = -6;
13     ctx.fillStyle = '#00f';
14     ctx.font = 'italic 50px 隶书';
15     ctx.textBaseline = 'top';
16     // 填充字符串
17     ctx.fillText('疯狂Java讲义', 0, 0);
18     ctx.strokeStyle = '#f0f';
19     ctx.font='bold 45px 宋体';
20     // 绘制字符串的边框
21     ctx.strokeText('轻量级Java EE企业应用实战', 0, 50);
22     // 填充一个矩形区域
23     ctx.fillRect(20 , 150 , 180 , 80);
24     ctx.lineWidth = 8;
25     // 绘制一个矩形边框
26     ctx.strokeRect(300 , 150 , 180 , 80);
27 </script>

 

显示效果为： 

 

 

 

 

 

--------------------------------------------------未完待续-------------------------------------

posted @ 2014-07-21 17:47  HuijunZhang  阅读(278)  评论(0)  编辑  收藏  举报
中国