置顶随笔
摘要: 首先，HTML 5 有了画布元素功能，但是由于IE 系列浏览器不支持此元素， 使得强大的绘图能力不能够公用，Google 在2006年 推出了 excanvas.js 扩展兼容包， 只要页面引用了excanvas.js IE浏览器就可以支持画布元素。Google 的 excanvas.js 是IE模式下用...
阅读全文posted @ 2009-01-08 11:02 李彬 阅读(4432) 评论(13)
编辑摘要: 很长时间没看 正则表达式了，碰巧今天用到，温故知新了一把 看书学习吧50% 的举一反三练习中的原创。一 javascript正则表达式的基本知识1 javascript 正则对象创建 和用法 声明javascript 正则表达式 var reCat = new RegExp("cat");你也可以var reCat = /cat/; //Perl 风格 （推荐）2 学习最常用的 test ex...
阅读全文posted @ 2008-07-31 23:04 李彬 阅读(39366) 评论(31)
编辑摘要: EditPlus 代码段实用指南 仅谨献给，喜欢使用 EditPlus 编写脚本或程序的程序员，希望的我能提供您更快捷的帮助。 每一个IDE，工具都有代码段，因为代码段可以省去程序员很多重复的代码（对象的声明等）。 虽然 .Net 2008 IDE 代码段的功能很强大，但是一些编写脚本，一些小程序，ASP,PHP等，鄙人认为还是 editplus 最为方便，打开速度快，和笔记本一样，颜色校正等，当...
阅读全文posted @ 2008-07-28 20:56 李彬 阅读(2431) 评论(25)
编辑
2009年1月10日
上一篇，我讲过，有一个日本人，小雄他做了一个非常强大的js画布库，能将 javascript 转换为 Silverlight
这次要用到他的函数库，地址在 http://www.cnblogs.com/libinqq/archive/2009/01/08/1371676.html
下面我就说下如何进行绘图，十分简单，我们只需要建立一个js数组，人性化的输出界面即可（如下）。
Code
function boot() {
draw(document.getElementById('canvas'));
draw(document.getElementById('vmlcanvas'));
}
function draw(e) {
var dot =
" 11111 "+
" 111111111 "+
" 2223323 "+
" 2323332333 "+
" 23223332333"+
" 2233332222 "+
" 3333333 "+
" 221222 "+
" 2221221222 "+
"222211112222"+
"332131131233"+
"331111111133"+
" 111 111 "+
" 222 222 "+
"2222 2222";
var ary = dot.split("");
var data = [];
var i, iz;
for (i = 0, iz = ary.length; i < iz; ++i) {
switch (parseInt(ary[i]) || 0) {
case 0: data.push(""); break;
case 1: data.push("#FF3900"); break;
case 2: data.push("#AD7B00"); break;
case 3: data.push("#FFA542"); break;
}
}
uu.draw(e).scale(5, 5).icon(5, 25, 12, 15, data);
}
上面的代码很简单，我们绘制一个绘图数组，下面直接分割输出即可。
注意下 .icon(x轴，y轴，数组的宽度，数组的高度）
(这是我本人绘的）
我们将我们的视图数组存取为一个对象，就可以多次调用，或做动画。
浏览器兼容方面无需担心， 因为这个库兼容能力很强，在IE下，它会把js 代码转化为 Silverlight ，如果客户没有安装
Silverlight，程序会解析为VML , 火狐和Google 就更兼容了因为他们本身就支持画布元素。
如果做游戏是首选，因为Silverlight 的速度相当不错，而且，都是以x,y轴来抒写，我们只要定义了画布，就不需要html div.
因为这个画布就是一个区域整体或控件。
posted @ 2009-01-10 22:51 李彬 阅读(3451) 评论(19)
编辑
2009年1月8日
首先，HTML 5 有了画布元素功能，但是由于IE 系列浏览器不支持此元素， 使得强大的绘图能力不能够公用，
Google 在2006年 推出了 excanvas.js 扩展兼容包， 只要页面引用了excanvas.js IE浏览器就可以支持画布元素。
Google 的 excanvas.js 是IE模式下用微软的 VML 来虚拟 canvas 元素，达到兼容。
局面出现了一种变化，微软推出 Silverlight， 不会更新VML 了，而火狐和 Google 是力挺JavaScript .
而且VML实现的效果很鸡肋，无论是渲染还是速度都是难以忍受的。
好再去年08年 12月中旬，有个日本人，叫小雄次郎，推出了 uupaa-excanvas.js ，使得 JavaScript 能够支持 Silverlight
这幅图可以看出 uuClass.Draw 支持 三种效果，微软的 VML ,微软的 Silverlight ,火狐Google浏览器的 Canvas
|
CanvasRenderingContext2D |
Silverlight |
VML |
 Google Chrome |
 |
- |
- |
 Safari 3+ |
|
- |
- |
 IE
6 |
- |
|
|
| IE
7 |
- |
|
|
| IE
8(IE8mode) |
- |
|
- |
| IE
8(IE7mode or IE5mode) |
- |
|
|
 Opera
9.2 |
|
- |
- |
| Opera
9.5+ |
|
- |
- |
 Firefox 2.x |
|
- |
- |
| Firefox 3.x |
|
- |
- |
| Firefox 3.1+ |
|
- |
- |
兼容性也非常好 。
调用方法就下面加入
Code
<head>
<script type="text/javascript" src="uupaa-color.mini.js"></script>
<script type="text/javascript" src="uupaa-excanvas.js"></script>
</head>
加入后， 浏览器就会把 javacript 画布程序，变成 Silverlight
原理是： 应用了微软 .xaml 文件绘图能力， 用 xaml 和 javacript 模拟出了 canvas 元素所有的属性和方法。
加入后的效果评比
1 速度性
这是js模拟生成的 Silverlight
这是纯js 的代码
经过测试 JavaScript 模拟生成的 Silverlight 要比纯Js 要快 5~6倍的速度。
（其实就 Silverlight，只是js 抒写了xaml 在客户端）
2 图形滤镜
左侧是js生成的 Silverlight 右侧是 纯JS
可以看出在标准模式下，JS是不支持滤镜的，但是用 JS 模拟生成的 Silverlight 是全部支持的。
（另火狐和Google浏览器 效果和左侧一样）
最后说下开发用途：
如果你是一个javascript 发烧友或者是 js能力比较强的那种，你要做一个小项目，希望兼容多浏览器
但是又不想安装学习Silverlight C# 等一些的，因为太庞大，没必要，那你就不防考虑下这个库，最重要
的是它无需改变你的js代码，引用就可以将 js 画布转换为 Silverlight，其实就是 Silverlight，
因为C#的代码最后输出到客户端也是XAML,这个库用JS将你的画布程序转换为 XAML,所以质量和速度非常快。
兼容能力强：
在IE 如果客户端安装了Silverlight，用Silverlight显示，如果客户端没有安装就用 VML显示。
火狐和Google 就不用了，因为给你的画布元素就是标准的。
让javascript 画布变成 Silverlight 的组件包下载
下载
最后一点，欢迎转载，但是作者的地方请您输入 转载 两字。
posted @ 2009-01-08 11:02 李彬 阅读(4432) 评论(13)
编辑
2008年12月9日
我几乎半年没写博客了，哈哈先来个问候语。
可能有些人早就知道，canvas 这个元素，这个是在 w3c HTML5.0 方案确定的元素， 可惜的是 IE 不支持这个元素，
火狐在很早的版本就支持了这个元素， 下面是一些浏览器支持 canvas 元素预览图。
| Firefox |
Safari |
Opera |
ExplorerCanvas |
| 2.0 ○ |
2.0 ○ |
9.2 ○ |
0002 △ |
| 3.0 ○ |
3.0 ○ |
9.5 ○ |
|
ExplorerCanvas 是 Google 公司推出的一个专门让IE支持 canvas 元素的扩展类，即 excanvas.js，最新版本是 0002版本
为什么是三角呢，因为只提供部分属性方法支持。
---------------------------------------------------------------------------------------------------------
不可否认的javascript的先天缺点：
可怜的javascript由于微软，坚决反对,对js的扩展，而且IE占有 70%浏览器市场，使得js html 扩展举步维艰,因为微软主推 Silverlight，而
Adobe 公司放弃了svg 主推 Flash, 所以javascript 就是一个可怜儿，没人理。
但是javascript 是个神奇的语言，官方不给，民间自创，没有的方法，函数，可以通过原型构建新对象，所以像JQ，等这些扩展
控件百花齐放，javascript 没有图像库，绘图类，但是可以在其他浏览器用canvas 元素，在IE可以用vml 构造canvas 。
但是给我的感觉无论是，div实现图形还是 canvas 元素，给人的感觉都是太肤浅了，不支持的太多了比如最重要的文字、字体，旋转，变形。
和现有的flash 和层出不穷的 Silverlight没的比、不能比、没法比、千万不要比。
这里我有一句忠告就是用 javascript 绘图 = 自捏，还是老老实实的用 Silverlight 或 flash 。
--------------------------------------------------------------------------------------------------------
不可否认的javascript的先天优点：
代码量小，不用客户端安装任何插件，这对企业级的内网用户再合适不过了，有很多优秀的js库可以丰富js脚本。
这里要感谢一下 Google ，它推出的 excanvas.js 扩展类，虽然不是完美，功能太少，但是至少让
javascript 在多浏览器下，真正支持了绘图。
这里我推荐一个网站吧，因为国内几乎没有人用js绘图，所以相关的资料很少
但在日本就不一样了，他们把html5 称为次时代html语言。
http://www.html5.jp/ 小日本的网站，提供了非常详细的 html5 的参考资料，包括canvas 元素，而且方法，属性
都非常友好的告诉了你，那个浏览器支持和不支持。
canvas 元素还是很有用的，假如你想快速开发，给客户生成报表，图饼一类的，你可以不用借助于 Silverlight 或 flash 。
推荐几个小日本的控件(都是基于excanvas.js ）
这几个控件使用超级简单
柱形图设置
Code
var items = [
["商品A", 20, 58, 40, 14, 38, 20, 40],
["商品B", 10, 14, 58, 80, 70, 90, 20],
["商品C", 10, 14, 58, 80, 70, 90, 20],
["商品D", 10, 14, 58, 80, 70, 90, 20],
["商品E", 10, 14, 58, 80, 70, 90, 20]
];
7 个数字组，代表的是一周的7天，如果你有多个商品可以定义更多 商品F,商品G, 控件自动分配。
我测试过所有浏览器都支持，如果作为企业用户，你不想用 Flash 等可以用这个，修改维护都很方便
圆饼图设置
Code
var items = [
["sample01", 150],
["sample02", 100],
["sample03", 80],
["sample04", 60],
["sample05", 30],
["sample06", 20],
["sample07", 10],
["sample08", 10],
["sample09", 10],
["sample10", 10],
["sample11", 10],
["sample12", 10]
];
更简单你想增加一个比较就加一个 ["sample13",10] 一条记录，控件会自动计算百分比。
js控件下载
-------------------------------------------------------------------------------------------------
骨灰级的应用 canvas 元素
世界之大，无奇不有，人外有人，天外有天，真不是道听途说。
丹麦人，javascript 狂热者，+ 天才。
Jacob Seidelin
这是他 2D 作品 （最好用火狐，谷歌浏览器，IE会很慢）
http://www.nihilogic.dk/labs/mario/mario_large_music.htm
只有14k代码的超级玛丽（作者开源)
他用canvas 元素实现的，没有用任何图片，14K 哦，给我1400K 我也实现不了。
最近他又在研究 3D
下面是他用 js + canvas 做的3D小游戏 （最好用火狐，谷歌浏览器，IE会很慢）
http://www.nihilogic.dk/labs/wolf/ 3D射击 X 开门 C 子弹
http://www.nihilogic.dk/labs/chess/ 3D国际象棋（可以鼠标旋转场景）
---------------------------------------------------------------------------
总结：对我们来说，认识下 canvas 元素，也可以学习下应用 excanvas.js
可以参考http://www.html5.jp/ ，不难，如果不用 flash,Silverlight,只是报表
应用还是个不错的选择，当然如果你是js游戏发烧友可以更进一步的发掘，当然
建议，如果你不是 Jacob Seidelin 那种狂热型，还是用 flash,Silverlight 更好。
posted @ 2008-12-09 00:48 李彬 阅读(5791) 评论(23)
编辑
2008年7月31日
摘要: 很长时间没看 正则表达式了，碰巧今天用到，温故知新了一把 看书学习吧50% 的举一反三练习中的原创。一 javascript正则表达式的基本知识1 javascript 正则对象创建 和用法 声明javascript 正则表达式 var reCat = new RegExp("cat");你也可以var reCat = /cat/; //Perl 风格 （推荐）2 学习最常用的 test ex...
阅读全文posted @ 2008-07-31 23:04 李彬 阅读(39366) 评论(31)
编辑
2008年7月28日
EditPlus 代码段实用指南
仅谨献给，喜欢使用 EditPlus 编写脚本或程序的程序员，希望的我能提供您更快捷的帮助。
每一个IDE，工具都有代码段，因为代码段可以省去程序员很多重复的代码（对象的声明等）。
虽然 .Net 2008 IDE 代码段的功能很强大，但是一些编写脚本，一些小程序，ASP,PHP等，鄙人认为还是
editplus 最为方便，打开速度快，和笔记本一样，颜色校正等，当然 editplus 的代码段，相当易用，
方便，可移植功能强等优点，下面我来细说一下 EditPlus 代码段的妙用。
一 EditPlus 代码段的位置
我们打开 EditPlus 的安装目录 D:\Program Files\EditPlus 2
如图 我们看见了 一组 后缀 为 *.cls 的文件 这些就是 EditPlus的代码段插件
我们在打开 EditPlus 可以在 左上角看见它们 如图
这里有很多库，当然其中有一个是我自己建立的，你可以建立一个文本文件安装里面的规则去写，然后更改后缀名为.ctl即可
二 EditPlus 代码段的使用
选择左上角的工具库 （建议把自己常用的都放在一个库中）
非常简单 = 关键字 + F2 即可
举例 1 写js 脚本
输入 js + F2
就会马上显示出
<script language="JavaScript">
<!--
//-->
</script>
举例 2 我在写脚本 asp 程序 想中止一下看看输出变量
那么我写 bug + F2
马上就会输出
Response.write "变量名=" & 变量值 & "<br>"
Response.end
省下我写 Response.end 一类繁琐代码的。
举例3 我想 在这里显示出 按钮特效
那么我写 jsz + F2 马上会显示出 （命名小技巧）
如图
以上3列 都是我的自己库， 你可以收集自己需要的。
当然你也可以从左边拖动到右侧，不过还是手写+F2 速度最快。
三 EditPlus 如何扩展代码库
前面说过 是 关键字+F2 = 显示代码段
那么我们建立了自己的代码库如何添加代码段呢
有两种方法
1 可以在左边 右键 添加 编辑 如图
2 也可以自己编写 （建议）
非常简单
建立一个文本文件
#T=a
<a href='' target='_blank'>^!</a>
#T=az（返回）
<a href='javascript:history.go(-1)'><< 返回上一页</a>
#T=az（图片）
<a href='libin.asp' target='_blank'><img src='' width='' height='' border='0'></a>
#T=az（修改）
<a href='Admin_Admin.asp?Action=Modify&ID=" & rs("ID") & "'>修改</a>
#T=az（提交）
<a href='javascript:VoteForm.submit();'><img src='images/voteSubmit.gif' width='52' height='18' border='0'></a>
#T=az（删除）
<a href='' onClick="return confirm('确定要删除此调查吗？');">删除</a>
#T=az（关闭窗体）
<a href='/' onclick='javascript:window.close(); return false;'>关闭窗口</a>
#T=az（Eamil）
<a href='mailto:libinqq@126.com?Subject=你好'>Send Mail</a>
#T=az（收藏）
<a href="javascript:window.external.addFavorite('auto.inhe.net','银河车网')">加入收藏</a>
#T=az（设为首页）
<a href='#' onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('auto.inhe.net')">设为首页</a>
#T=az（打印）
<a href='javascript:window.print()'>打印</a>
这是我写的
你只要
#T= 关键字
内容
#T= 关键字
内容
循环即可
然后我们保存文本文件并改名为 xxx.ctl 即可
体验一下快感吧
我要写 a 直接 a + F2 马上显示
<a href='' target='_blank'></a>
当然你也可以写复杂的代码段
输入az + F2 可以弹出菜单让你选择（如果有名称重复的关键字 EditPlus 会弹出框让你选择的）
四 EditPlus 代码库的移植
比如你非常辛苦建立了常用代码库，如果要换计算机，可找到EditPlus 的安装目录 D:\Program Files\EditPlus 2
把你建立的 某某.ctl 文件备份就行， 在另一台计算机 EditPlus 根目录 粘贴就可 简单。
方法已经交给大家了，希望对你有用， 我在编写小程序，脚本，asp程序的时候。
我的手是不离键盘的，这里表单 F2 这里数据库Do循环 F2 这里 声明对象 F2 (100%正确 绝对不会命名错误）
开发速度非常快的， 当然复杂的你可以用 .net 2008 如果只是写js脚本，asp 、 php 程序，用EditPlus 自定义代码库
还是非常高效的。
posted @ 2008-07-28 20:56 李彬 阅读(2431) 评论(25)
编辑
2008年6月11日
摘要: <script type="text/javascript">function Test() { try { return "函数Return了。"; } finally { alert("Return 后仍然能执行"); }}alert(Test());</script>上述代码 它的执行顺序 将是1alert("Return 后仍然能执行"); 2 return "函数...
阅读全文posted @ 2008-06-11 08:48 李彬 阅读(185) 评论(3)
编辑