鸿 网 互 联 www.68idc.cn

当前位置 : 服务器租用 > 网络程序脚本 > hta > >

用JavaScript画直线、圆、扁圆形(不用VML,Canvas) | #hta #javas

来源:互联网 作者:佚名 时间:2015-08-10 07:30
用JavaScript画 直线 、圆、椭圆( 不用 VML,Canvas) | #hta #javascript #2d 以前计算机图形学的课程设计,算法什么的都是书上Copy的,只不过 不用 c,而用js而已。 (话说我图形学机试100分,笔试17分,你说杯具不杯具,俺不想研究其理论,只想用它的公式做
用JavaScript画直线、圆、椭圆(不用VML,Canvas) | #hta #javascript #2d
以前计算机图形学的课程设计,算法什么的都是书上Copy的,只不过不用c,而用js而已。
(话说我图形学机试100分,笔试17分,你说杯具不杯具,俺不想研究其理论,只想用它的公式做出我想要的东西而已)。



核心代码:
/**
 * GCanvas 1.2
 * @author GreatGhoul
 * @email: greatghoul@gmail.com
 * @blog: http://greatghoul.iteye.com
 */
(function() {
	// 创建GCanvas构造方法的闭包和全局引用
	var GCanvas = window.GCanvas = function(id, w, h) {
		return new Canvas(id, w, h);
	}
	
	/**
	 * 用指定的id, 长和宽构造一个画板
	 * 
	 * @param id html元素的id
	 * @param w 指定的画板宽度
	 * @param h 指定的画板高度
	 */
	var Canvas = function(id, w, h) {
		// 只想Canvas实例,以修正this指针的引用错误.
		var self = this;
		
		// 缓冲器
		var cache = [];
		
		// 画板绑定到的html元素的引用
		var canvas = document.getElementById(id);
		
		// 画板底色, 默认为浅灰色
		var bgColor = "lightgray";

		// 笔刷的颜色, 默认为黑色
		var fgColor = "black";

		// 原点坐标, 初始为(0, 0)
		var oX = 0, oY = 0;

		// 是否允许点画到画板边界以外
		var allowOutside = false;

		// 渲染html元素
		canvas.onselectstart = function() {return false;}
		canvas.style.overflow = "hidden";
		canvas.style.background = "lightblue";
		canvas.style.width = (w ? w : 400) + "px";
		canvas.style.height = (h ? h : 400) + "px";
		
		this.copyright = function() {
			var c = "# G2W GCanvas [Version 1.2]\n"
				  + "# (C) Copyright 2009-2010 G2W Blog.\n"
				  + "# http://greatghoul.iteye.com \n";

			return c;
		}

		/**
		 * 获取画板左上角的在文档中的绝对坐标
		 *
		 * @return 形如{x, y}的坐标
		 */
		this.pos = function() {
			var rect = canvas.getClientRects()[0];
			return {
				x: rect.left,
				y: rect.top
			};
		}

		/**
		 * 清空画板
		 */
		this.clear = function() {
			cache = [];
			canvas.innerHTML = "";
		}

		/**
		 * 设置或取得画板的大小, 如果缓存不为空,则设置无效
		 *
		 * @param w 新的宽度
		 * @param h 新的高度
		 * @return 形如{width, height}的尺寸
		 */
		 this.size = function(w, h) {
			if (w && h) {
				if (cache.length != 0) return;
				canvas.style.width = w + "px";
				canvas.style.height = h + "px";
			} else {
				return {
					width: parseInt(canvas.style.width),
					height: parseInt(canvas.style.width)
				};
			}
		}

		/**
		 * 设置或取得是否允许点显示到画板边界以外
		 *
		 * @param flag true为允许显示,false为不允许,其它为不做改变
		 * @return 是否允许显示
		 */
		this.allowOutside = function(flag) {
			if (flag == true || flag == false)
				allowOutside = flag;
			return allowOutside;
		}

		/**
		 * 设置或取得笔刷颜色
		 * 颜色的格式为:
		 * rgb(r, g, b) 其中r, g, b为0-255的整数
		 * #000000 ~ #FFFFFF
		 * 字符串描述 如: red, blue, black, lightblue
		 *
		 * @param color 新的笔刷颜色
		 * @return 当前笔刷颜色
		 */
		this.fgColor = function(color) {
			fgColor = (color ? color: fgColor);
			return fgColor;
		}

		/**
		 * 设置或取得画布颜色
		 * 颜色的格式为:
		 * rgb(r, g, b) 其中r, g, b为0-255的整数
		 * #000000 ~ #FFFFFF
		 * 字符串描述 如: red, blue, black, lightblue
		 *
		 * @param color 新的画布颜色
		 * @return 当前画布颜色
		 */
		this.bgColor = function(color) {
			bgColor = (color ? color: bgColor);
			canvas.style.background = bgColor;
			return bgColor;
		}
		
		/**
		 * 在给定的坐标出画点
		 *
		 * @param x x坐标
		 * @param y y坐标
		 */
		this.point = function(x, y) {
			var pos = self.pos();
			var size = self.size();
			x = pos.x + oX + x;
			y = pos.y + oY + y;
			
			// 如果不允许在边界外显示点,则不讲该点推入缓存
			if (!allowOutside 
				&& !((x >= pos.x && x <= pos.x + size.width)
				&& (y >= pos.y && y <= pos.y + size.height)))
				return;
			cache.push("<div >
1 楼 caowei3047 2010-05-27  
hta文件好强啊。
2 楼 greatghoul 2010-05-28  
caowei3047 写道
hta文件好强啊。

这个例子其实并没有表现出hta的什么特性。
3 楼 jarry-li 2010-06-13  
4 楼 taote 2010-11-02  
MidBresenham  多谢
5 楼 effort_fan 2010-11-28  
学习了。hta学习一下。
6 楼 louis0911 2011-05-03  
太强大了!!!!!学习中
7 楼 mahu456 2011-06-30  
很厉害!学习!
8 楼 alvin198761 2012-08-28  
强大到没怎么看到,然后,不会用你这个东西做点事情
9 楼 alvin198761 2012-08-28  
greatghoul 写道
caowei3047 写道
hta文件好强啊。

这个例子其实并没有表现出hta的什么特性。

你在例子运行的时候,删一个hta文件试试
10 楼 greatghoul 2012-08-28  
alvin198761 写道
你在例子运行的时候,删一个hta文件试试


倒是没有试过在运行时删除hta文件,应该是可以直接删除的,因为以前有人用 HTA 做的软件开发了自动更新的功能,通过ajax方法读取更新后的文件,覆盖旧版本的文件,然后刷新 HTA ,便是新版本了.

不过 HTA 虽然有很多东西可以用,权限也高,但是不能跨平台.豆瓣有一个叫做 onering 的东西,有比较好的跨平台能力,但是发布后,几乎都没有怎么更新.

如果能够 HTML5 和现在性能越来越好的 javascript 或者一些其它的脚本语言,兴趣真有不小的玩头.
网友评论
<