核心代码：
1
.
/*
*
2. * GCanvas 1.2
3. * @author GreatGhoul
4. * @email: greatghoul@gmail.com
5. * @blog:
http://greatghoul.iteye.com
6.
*/
7
.(function() {
8
.
//
创建GCanvas构造方法的闭包和全局引用
9
. var GCanvas
=
window.GCanvas
=
function(id, w, h) {
10
.
return
new
Canvas(id, w, h);
11
. }
12
.
13
.
/*
*
14. * 用指定的id, 长和宽构造一个画板
15. *
16. * @param id html元素的id
17. * @param w 指定的画板宽度
18. * @param h 指定的画板高度
19.
*/
20
. var Canvas
=
function(id, w, h) {
21
.
//
只想Canvas实例,以修正this指针的引用错误.
22
. var self
=
this
;
23
.
24
.
//
缓冲器
25
. var cache
=
[];
26
.
27
.
//
画板绑定到的html元素的引用
28
. var canvas
=
document.getElementById(id);
29
.
30
.
//
画板底色, 默认为浅灰色
31
. var bgColor
=
"
lightgray
"
;
32
.
33
.
//
笔刷的颜色, 默认为黑色
34
. var fgColor
=
"
black
"
;
35
.
36
.
//
原点坐标, 初始为(0, 0)
37
. var oX
=
0
, oY
=
0
;
38
.
39
.
//
是否允许点画到画板边界以外
40
. var allowOutside
=
false
;
41
.
42
.
//
渲染html元素
43
. canvas.onselectstart
=
function() {
return
false
;}
44
. canvas.style.overflow
=
"
hidden
"
;
45
. canvas.style.background
=
"
lightblue
"
;
46
. canvas.style.width
=
(w
?
w :
400
)
+
"
px
"
;
47
. canvas.style.height
=
(h
?
h :
400
)
+
"
px
"
;
48
.
49
.
this
.copyright
=
function() {
50
. var c
=
"
# G2W GCanvas [Version 1.2]\n
"
51
.
+
"
# (C) Copyright 2009-2010 G2W Blog.\n
"
52
.
+
"
# http://greatghoul.iteye.com \n
"
;
53
.
54
.
return
c;
55
. }
56
.
57
.
/*
*
58. * 获取画板左上角的在文档中的绝对坐标
59. *
60. * @return 形如{x, y}的坐标
61.
*/
62
.
this
.pos
=
function() {
63
. var rect
=
canvas.getClientRects()[
0
];
64
.
return
{
65
. x: rect.left,
66
. y: rect.top
67
. };
68
. }
69
.
70
.
/*
*
71. * 清空画板
72.
*/
73
.
this
.clear
=
function() {
74
. cache
=
[];
75
. canvas.innerHTML
=
""
;
76
. }
77
.
78
.
/*
*
79. * 设置或取得画板的大小, 如果缓存不为空,则设置无效
80. *
81. * @param w 新的宽度
82. * @param h 新的高度
83. * @return 形如{width, height}的尺寸
84.
*/
85
.
this
.size
=
function(w, h) {
86
.
if
(w
&&
h) {
87
.
if
(cache.length
!=
0
)
return
;
88
. canvas.style.width
=
w
+
"
px
"
;
89
. canvas.style.height
=
h
+
"
px
"
;
90
. }
else
{
91
.
return
{
92
. width: parseInt(canvas.style.width),
93
. height: parseInt(canvas.style.width)
94
. };
95
. }
96
. }
97
.
98
.
/*
*
99. * 设置或取得是否允许点显示到画板边界以外
100. *
101. * @param flag true为允许显示,false为不允许,其它为不做改变
102. * @return 是否允许显示
103.
*/
104
.
this
.allowOutside
=
function(flag) {
105
.
if
(flag
==
true
||
flag
==
false
)
106
. allowOutside
=
flag;
107
.
return
allowOutside;
108
. }
109
.
110
.
/*
*
111. * 设置或取得笔刷颜色
112. * 颜色的格式为:
113. * rgb(r, g, b) 其中r, g, b为0-255的整数
114. * #000000 ~ #FFFFFF
115. * 字符串描述 如: red, blue, black, lightblue
116. *
117. * @param color 新的笔刷颜色
118. * @return 当前笔刷颜色
119.
*/
120
.
this
.fgColor
=
function(color) {
121
. fgColor
=
(color
?
color: fgColor);
122
.
return
fgColor;
123
. }
124
.
125
.
/*
*
126. * 设置或取得画布颜色
127. * 颜色的格式为:
128. * rgb(r, g, b) 其中r, g, b为0-255的整数
129. * #000000 ~ #FFFFFF
130. * 字符串描述 如: red, blue, black, lightblue
131. *
132. * @param color 新的画布颜色
133. * @return 当前画布颜色
134.
*/
135
.
this
.bgColor
=
function(color) {
136
. bgColor
=
(color
?
color: bgColor);
137
. canvas.style.background
=
bgColor;
138
.
return
bgColor;
139
. }
140
.
141
.
/*
*
142. * 在给定的坐标出画点
143. *
144. * @param x x坐标
145. * @param y y坐标
146.
*/
147
.
this
.point
=
function(x, y) {
148
. var pos
=
self.pos();
149
. var size
=
self.size();
150
. x
=
pos.x
+
oX
+
x;
151
. y
=
pos.y
+
oY
+
y;
152
.
153
.
//
如果不允许在边界外显示点,则不讲该点推入缓存
154
.
if
(
!
allowOutside
155
.
&&
!
((x
>=
pos.x
&&
x
<=
pos.x
+
size.width)
156
.
&&
(y
>=
pos.y
&&
y
<=
pos.y
+
size.height)))
157
.
return
;
158
. cache.push(
"
<div style='width:1px;height:1px;position:absolute;left:
"
+
x
+
"
px;top:
"
+
y
+
"
px;background-color:
"
+
fgColor
+
"
;font-size:0px;z-index:999;'></div>
"
);
159
. }
160
.
161
.
/*
*
162. * 数值微分法画直线
163. *
164. * @param x0 起点x坐标
165. * @param y0 起点y坐标
166. * @param x1 终点x坐标
167. * @param y1 终点y坐标
168.
*/
169
. function line_DDA(x0, y0, x1, y1) {
170
. var px
=
x0, py
=
y0;
171
. var dx
=
x1
-
x0;
172
. var dy
=
y1
-
y0;
173
. var incX
=
0
, incY
=
0
;
174
. var epsl
=
Math.abs(dx)
>
Math.abs(dy)
?
Math.abs(dx) : Math.abs(dy);
175
. incX
=
dx
/
epsl;
176
. incY
=
dy
/
epsl;
177
.
for
(var i
=
0
; i
<
epsl; i
++
) {
178
. self.point(parseInt(px
+
0.5
), parseInt(py
+
0.5
));
179
. px
+=
incX;
180
. py
+=
incY;
181
. }
182
. }
183
.
184
.
/*
*
185. * 用给定的起点和终点坐标画直线
186. *
187. * @param x0 起点x坐标
188. * @param y0 起点y坐标
189. * @param x1 终点x坐标
190. * @param y1 终点y坐标
191.
*/
192
.
this
.line
=
function(x0, y0, x1, y1) {
193
. line_DDA(x0, y0, x1, y1);
194
. }
195
.
196
.
/*
*
197. * 用中点Bresenham法画圆
198. *
199. * @param x 圆心x坐标
200. * @param y 圆心y坐标
201. * @param r 圆的半径
202.
*/
203
. function circle_MidBresenham(x, y, r) {
204
. var px, py, d;
205
. px
=
0
; py
=
r; d
=
1
-
r;
206
.
while
(px
<
py) {
207
. self.point(x
+
px, y
+
py);
208
. self.point(x
+
py, y
+
px);
209
. self.point(x
-
px, y
+
py);
210
. self.point(x
+
py, y
-
px);
211
. self.point(x
+
px, y
-
py);
212
. self.point(x
-
py, y
+
px);
213
. self.point(x
-
px, y
-
py);
214
. self.point(x
-
py, y
-
px);
215
.
if
(d
<
0
) d
+=
2
*
px
+
3
;
216
.
else
{
217
. d
+=
2
*
(px
-
py)
+
5
;
218
. py
--
;
219
. }
220
. px
++
;
221
. }
222
. }
223
.
224
.
/*
*
225. * 用给定的圆心坐标和半径画圆
226. *
227. * @param x 圆心x坐标
228. * @param y 圆心y坐标
229. * @param r 圆的半径
230.
*/
231
.
this
.circle
=
function(x, y, r) {
232
. circle_MidBresenham(x, y, r);
233
. }
234
.
235
.
/*
*
236. * 用中点Bresenham法画椭圆
237. *
238. * @param x 圆心x坐标
239. * @param y 圆心y坐标
240. * @param a 长半轴长度
241. * @param b 短半轴长度
242.
*/
243
. function MidBresenhamEllipse(x, y, a, b) {
244
. var px, py;
245
. var d1, d2;
246
. px
=
0
;
247
. py
=
b;
248
. d1
=
b
*
b
+
a
*
a
*
(
-
b
+
0.25
);
249
. self.point(x
+
px, y
+
py);
250
. self.point(x
-
px, y
-
py);
251
. self.point(x
-
px, y
+
py);
252
. self.point(x
+
px, y
-
py);
253
.
while
(b
*
b
*
(px
+
1
)
<
a
*
a
*
(py
-
0.5
)) {
254
.
if
(d1
<=
0
) {
255
. d1
+=
b
*
b
*
(
2
*
px
+
3
);
256
. px
++
;
257
. }
else
{
258
. d1
+=
b
*
b
*
(
2
*
px
+
3
)
+
a
*
a
*
(
-
2
*
py
+
2
);
259
. px
++
;
260
. py
--
;
261
. }
262
. self.point(x
+
px, y
+
py);
263
. self.point(x
-
px, y
-
py);
264
. self.point(x
-
px, y
+
py);
265
. self.point(x
+
px, y
-
py);
266
. }
267
. d2
=
b
*
b
*
(px
+
0.5
)
*
(px
+
0.5
)
+
a
*
a
*
(py
-
1
)
*
(py
-
1
)
-
a
*
a
*
b
*
b;
268
.
while
(py
>
0
) {
269
.
if
(d2
<=
0
) {
270
. d2
+=
b
*
b
*
(
2
*
px
+
2
)
+
a
*
a
*
(
-
2
*
py
+
3
);
271
. px
++
;
272
. py
--
;
273
. }
else
{
274
. d2
+=
a
*
a
*
(
-
2
*
py
+
3
);
275
. py
--
;
276
. }
277
. self.point(x
+
px, y
+
py);
278
. self.point(x
-
px, y
-
py);
279
. self.point(x
-
px, y
+
py);
280
. self.point(x
+
px, y
-
py);
281
. }
282
. }
283
.
284
.
/*
*
285. * 用给定的圆心坐标和长短半轴画椭圆
286. *
287. * @param x 圆心x坐标
288. * @param y 圆心y坐标
289. * @param a 长半轴长度
290. * @param b 短半轴长度
291.
*/
292
.
this
.ellipse
=
function(x, y, a, b) {
293
. MidBresenhamEllipse(x, y, a, b);
294
. }
295
.
296
.
297
.
/*
*
298. * 将缓存中的图像显示到画板上,并清空缓存
299.
*/
300
.
this
.paint
=
function() {
301
. canvas.innerHTML
+=
cache.join(
""
);;
302
. cache
=
[];
303
. }
304
. }
305
.})();
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
