图片 2

绘制斜线,初次搞定正则表达式

下面是转自:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>垂直渐变描边</title>  <script src="js/modernizr.js"></script>  </head>    <body>  <script type="text/javascript">  window.addEventListener('load',eventWindowLoaded,false);  function eventWindowLoaded(){      canvasApp();  }  function canvasSupport(){      return Modernizr.canvas;  }  function canvasApp(){      if(!canvasSupport()){          return;      }else{          var theCanvas = document.getElementById('canvas')          var context = theCanvas.getContext("2d")        }      drawScreen();      function drawScreen(){          //水平渐变值必须保持为0          var gr = context.createLinearGradient(0,0,0,100);          //添加颜色端点          gr.addColorStop(0,'rgb(255,0,0)');          gr.addColorStop(.5,'rgb(0,255,0)');              gr.addColorStop(1,'rgb(0,0,255)');                  //应用fillStyle生成渐变          context.strokeStyle = gr;          context.beginPath();          context.moveTo(0,0);          context.lineTo(50,0);          context.lineTo(100,50);          context.lineTo(50,100);          context.lineTo(0,100);          context.lineTo(0,0);          context.stroke();          context.closePath();                                }  }  </script>  <canvas id="canvas" width="500" height="500">  你的浏览器无法使用canvas  小白童鞋;你的支持是我最大的快乐!!  </canvas>  </body>  </html>

 

如果你曾经用过Perl或任何其他内建正则表达式支持的语言,你一定知道用正则表达式处理文本和匹配模式是多么简单。如果你不熟悉这个术语,那么“正则表达式”(Regular Expression)就是一个字符构成的串,它定义了一个用来搜索匹配字符串的模式。

图片 1

<!DOCTYPE HTML>

许多语言,包括Perl、PHP、Python、JavaScript和JScript,都支持用正则表达式处理文本,一些文本编辑器用正则表达式实现高级“搜索-替换”功能。那么Java又怎样呢?本文写作时,一个包含了用正则表达式进行文本处理的Java规范需求(Specification Request)已经得到认可,你可以期待在JDK的下一版本中看到它。

<html>

然而,如果现在就需要使用正则表达式,又该怎么办呢?你可以从Apache.org下载源代码开放的Jakarta-ORO库。本文接下来的内容先简要地介绍正则表达式的入门知识,然后以Jakarta-ORO API为例介绍如何使用正则表达式。

<title>Canvas直线</title>

一、正则表达式基础知识

<body>

我们先从简单的开始。假设你要搜索一个包含字符“cat”的字符串,搜索用的正则表达式就是“cat”。如果搜索对大小写不敏感,单词“catalog”、“Catherine”、“sophisticated”都可以匹配。也就是说:

<canvas id=”myCanvas” width=”200″ height=”200″ >

您的浏览器不支持 Canvas

1.1 句点符号

</canvas>

假设你在玩英文拼字游戏,想要找出三个字母的单词,而且这些单词必须以“t”字母开头,以“n”字母结束。另外,假设有一本英文字典,你可以用正则表达式搜索它的全部内容。要构造出这个正则表达式,你可以使用一个通配符——句点符号“.”。这样,完整的表达式就是“t.n”,它匹配“tan”、“ten”、“tin”和“ton”,还匹配“t#n”、“tpn”甚至“t n”,还有其他许多无意义的组合。这是因为句点符号匹配所有字符,包括空格、Tab字符甚至换行符:

<script type=”text/javascript”>

var c = document.getElementById(“myCanvas”);

1.2 方括号符号

var cxt = c.getContext(“2d”);

为了解决句点符号匹配范围过于广泛这一问题,你可以在方括号(“[]”)里面指定看来有意义的字符。此时,只有方括号里面指定的字符才参与匹配。也就是说,正则表达式“t[aeio]n”只匹配“tan”、“Ten”、“tin”和“ton”。但“Toon”不匹配,因为在方括号之内你只能匹配单个字符:

cxt.beginPath();

cxt.moveTo(70,140);

1.3 “或”符号

cxt.lineTo(140,70);

如果除了上面匹配的所有单词之外,你还想要匹配“toon”,那么,你可以使用“|”操作符。“|”操作符的基本意义就是“或”运算。要匹配“toon”,使用“t(a|e|i|o|oo)n”正则表达式。这里不能使用方扩号,因为方括号只允许匹配单个字符;这里必须使用圆括号“()”。圆括号还可以用来分组,具体请参见后面介绍。

cxt.stroke();

</script>

1.4 表示匹配次数的符号

</body>

表一显示了表示匹配次数的符号,这些符号用来确定紧靠该符号左边的符号出现的次数:

</html>

效果如下图:

假设我们要在文本文件中搜索美国的社会安全号码。这个号码的格式是999-99-9999。用来匹配它的正则表达式如图一所示。在正则表达式中,连字符(“-”)有着特殊的意义,它表示一个范围,比如从0到9。因此,匹配社会安全号码中的连字符号时,它的前面要加上一个转义字符“\”。

 图片 2

【HTML5 Canvas
又很强的绘图能力,小弟初学,先从直线画起。第一篇文章,后台编辑器还不知怎么用,先这么着吧。】

图一:匹配所有123-12-1234形式的社会安全号码


假设进行搜索的时候,你希望连字符号可以出现,也可以不出现——即,999-99-9999和999999999都属于正确的格式。这时,你可以在连字符号后面加上“?”数量限定符号,如图二所示:

图二:匹配所有123-12-1234和123121234形式的社会安全号码

下面我们再来看另外一个例子。美国汽车牌照的一种格式是四个数字加上二个字母。它的正则表达式前面是数字部分“[0-9]{4}”,再加上字母部分“[A-Z]{2}”。图三显示了完整的正则表达式。

图三:匹配典型的美国汽车牌照号码,如8836KV

1.5 “否”符号
“^”符号称为“否”符号。如果用在方括号内,“^”表示不想要匹配的字符。例如,图四的正则表达式匹配所有单词,但以“X”字母开头的单词除外。

图四:匹配所有单词,但“X”开头的除外

1.6 圆括号和空白符号
假设要从格式为“June 26, 1951”的生日日期中提取出月份部分,用来匹配该日期的正则表达式可以如图五所示:

图五:匹配所有Moth DD,YYYY格式的日期

新出现的“\s”符号是空白符号,匹配所有的空白字符,包括Tab字符。如果字符串正确匹配,接下来如何提取出月份部分呢?只需在月份周围加上一个圆括号创建一个组,然后用ORO API(本文后面详细讨论)提取出它的值。修改后的正则表达式如图六所示:

图六:匹配所有Month DD,YYYY格式的日期,定义月份值为第一个组

1.7 其它符号
为简便起见,你可以使用一些为常见正则表达式创建的快捷符号。如表二所示:
表二:常用符号

例如,在前面社会安全号码的例子中,所有出现“[0-9]”的地方我们都可以使用“\d”。修改后的正则表达式如图七所示:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图