python3画圆、直线_用JavaScript画直线、圆、椭圆(不用VML,Canvas) | #hta #javascript #2d...

最新推荐文章于 2024-05-12 09:57:12 发布

weixin_39979167

最新推荐文章于 2024-05-12 09:57:12 发布

阅读量123

点赞数

文章标签： python3画圆、直线

核心代码：

/**

* 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"

+ "# 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("

}

/**

* 数值微分法画直线

* @param x0 起点x坐标

* @param y0 起点y坐标

* @param x1 终点x坐标

* @param y1 终点y坐标

function line_DDA(x0, y0, x1, y1) {

var px = x0, py = y0;

var dx = x1 - x0;

var dy = y1 - y0;

var incX = 0, incY = 0;

var epsl = Math.abs(dx) > Math.abs(dy) ? Math.abs(dx) : Math.abs(dy);

incX = dx / epsl;

incY = dy / epsl;

for (var i = 0; i < epsl; i++) {

self.point(parseInt(px + 0.5), parseInt(py + 0.5));

px += incX;

py += incY;

}

/**

* 用给定的起点和终点坐标画直线

* @param x0 起点x坐标

* @param y0 起点y坐标

* @param x1 终点x坐标

* @param y1 终点y坐标

this.line = function(x0, y0, x1, y1) {

line_DDA(x0, y0, x1, y1);

}

/**

* 用中点Bresenham法画圆

* @param x 圆心x坐标

* @param y 圆心y坐标

* @param r 圆的半径

function circle_MidBresenham(x, y, r) {

var px, py, d;

px = 0; py = r; d = 1 - r;

while (px < py) {

self.point(x + px, y + py);

self.point(x + py, y + px);

self.point(x - px, y + py);

self.point(x + py, y - px);

self.point(x + px, y - py);

self.point(x - py, y + px);

self.point(x - px, y - py);

self.point(x - py, y - px);

if (d < 0) d += 2 * px + 3;

else {

d += 2 * (px - py) + 5;

py--;

}

px++;

}

/**

* 用给定的圆心坐标和半径画圆

* @param x 圆心x坐标

* @param y 圆心y坐标

* @param r 圆的半径

this.circle = function(x, y, r) {

circle_MidBresenham(x, y, r);

}

/**

* 用中点Bresenham法画椭圆

* @param x 圆心x坐标

* @param y 圆心y坐标

* @param a 长半轴长度

* @param b 短半轴长度

function MidBresenhamEllipse(x, y, a, b) {

var px, py;

var d1, d2;

px = 0;

py = b;

d1 = b * b + a * a * (-b + 0.25);

self.point(x + px, y + py);

self.point(x - px, y - py);

self.point(x - px, y + py);

self.point(x + px, y - py);

while (b * b * (px + 1) < a * a * (py - 0.5)) {

if (d1 <= 0) {

d1 += b * b * (2 * px + 3);

px++;

} else {

d1 += b * b * (2 * px + 3) + a * a * (-2 * py + 2);

px++;

py--;

}

self.point(x + px, y + py);

self.point(x - px, y - py);

self.point(x - px, y + py);

self.point(x + px, y - py);

}

d2 = b * b * (px + 0.5) * (px + 0.5) + a * a * (py - 1) * (py - 1) - a * a * b * b;

while (py > 0) {

if (d2 <= 0) {

d2 += b * b * (2 * px + 2) + a * a * (-2 * py + 3);

px++;

py--;

} else {

d2 += a * a * (-2 * py + 3);

py--;

}

self.point(x + px, y + py);

self.point(x - px, y - py);

self.point(x - px, y + py);

self.point(x + px, y - py);

}

/**

* 用给定的圆心坐标和长短半轴画椭圆

* @param x 圆心x坐标

* @param y 圆心y坐标

* @param a 长半轴长度

* @param b 短半轴长度

this.ellipse = function(x, y, a, b) {

MidBresenhamEllipse(x, y, a, b);

}

/**

* 将缓存中的图像显示到画板上,并清空缓存

this.paint = function() {

canvas.innerHTML += cache.join("");;

cache = [];

}

})();

大小: 25.6 KB

下载次数: 736

分享到：

2010-03-10 17:02

10 楼

greatghoul

2012-08-28

alvin198761 写道

你在例子运行的时候，删一个hta文件试试

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

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

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

9 楼

alvin198761

2012-08-28

greatghoul 写道

caowei3047 写道

hta文件好强啊。

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

你在例子运行的时候，删一个hta文件试试

8 楼

alvin198761

2012-08-28

强大到没怎么看到，然后，不会用你这个东西做点事情

7 楼

mahu456

2011-06-30

很厉害!学习!

6 楼

louis0911

2011-05-03

太强大了！！！！！学习中

5 楼

effort_fan

2010-11-28

学习了。hta学习一下。

4 楼

taote

2010-11-02

MidBresenham

多谢

3 楼

jarry-li

2010-06-13

2 楼

greatghoul

2010-05-28

caowei3047 写道

hta文件好强啊。

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

1 楼

caowei3047

2010-05-27

hta文件好强啊。

weixin_39979167

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
python3画圆、直线_用JavaScript画直线、圆、椭圆(不用VML,Canvas) | #hta #javascript #2d...

核心代码：/*** GCanvas 1.2* @author GreatGhoul* @email: greatghoul@gmail.com* @blog: http://greatghoul.iteye.com*/(function() {// 创建GCanvas构造方法的闭包和全局引用var GCanvas = window.GCanvas = function(id, w, h) {ret...
复制链接

扫一扫