| 函数名(方法) | 示例代码(用 jg 图形对象) |
| setColor( "#HexColor" ); 指定画笔颜色,一旦设置后,这个颜色会一直保留,直到下一次再重新指定画笔颜色,这个颜色值可以类似于 html 中的 #rrggbb 颜色表示,用名称表示颜色也可以,例如:“ maroon ” | jg.setColor("#ff0000");
or with identical result
jg.setColor("red"); |
| setStroke( Number ); 指定画笔采用的线厚度,这个厚度一旦被设置,会一直保留,直到下一次重新指定一,默认厚度是 1px. 要设置点划线型,需要传 Stroke.DOTTED 参数,点划线型同样适用于矩形,多边型,折线和椭圆。
| jg.setStroke(3);
or
jg.setStroke(Stroke.DOTTED); |
| drawLine( X1, Y1, X2, Y2 ); 画线。从第一个坐标点到第二个坐标点,线的厚度由 setStroke 设置。 | jg.drawLine(20,50,453,40); |
| drawPolyline( Xpoints, Ypoints ); 一条折线是一系列线段的集合, Xpoints 和 Ypoints 是每个点的 x 坐标和 y 坐标的数组集合,必须像下面这样声明: var Xpoints = new Array(x1,x2,x3,x4,x5); var YPoints = new Array(y1,y2,y3,y4,y5); | var Xpoints = new Array(10,85,93,60); var YPoints = new Array(50,10,105,87); jg.drawPolyline(Xpoints,Ypoints); |
| drawRect( X, Y, width, height ); 一个矩形的外边线。参照左上角的坐标点,并指定矩形的宽度和高度。 | jg.drawRect(20,50,70,140); |
| fillRect( X, Y, width, height ); 填充矩形,参照左上角的坐标点,并指定矩形的宽度和高度。 | jg.fillRect(20,50,453,40); |
| drawPolygon( Xpoints, Ypoints ); 多边形。 Xpoints 和 Ypoints 是每个点的 x 坐标和 y 坐标的数组集合,必须像下面这样声明: var Xpoints = new Array(x1,x2,x3,x4,x5); var YPoints = new Array(y1,y2,y3,y4,y5); 如果始点和终点末被指定,多边线将会自动闭合。 | var Xpoints = new Array(10,85,93,60); var Ypoints = new Array(50,10,105,87); jg.drawPolygon(Xpoints, Ypoints);
Instead of Xpoints and Ypoints you may use another name provided it follows the rules for variable names. |
| fillPolygon( Xpoints, Ypoints ); 填充矩形。参数作用见 drawPolygon() | jg.fillPolygon(new Array(10,85,93,60), new Array(50,10,105,87)); |
| drawEllipse( X, Y, width, height ); 画椭圆边线。参照椭圆的外接矩形, x 和 y 是这个外接矩形的左上角坐标 | jg.drawEllipse(20,50,70,140); or jg.drawOval(20,50,70,140); |
| fillEllipse( X, Y, width, height ); 填充椭圆。参数见 drawEllipse() | jg.fillEllipse(20,50,71,141); or jg.fillOval(20,50,71,141); |
| drawString( "Text", X, Y ); 写文本至由 x 和 y 坐标指定的位置。不同于 Java ,坐标值是第一行文本的左上角坐标值。如果文本中包含有 HTML 标记将被转义,举个例子: "Some Text<br>more Text" 会被转义为两行 setFont( "font-family", "size+unit", Style ); 在 drawString() 之前调用。指定字体,大小,样式,字体和大小可以是与 HTML 中指示的一样,至于样式,可以使用的有: Font.PLAIN 默认样式,非粗体和斜体 Font.BOLD 粗体 Font.ITALIC 斜体 它们可以结合使用 | jg.setFont("arial","15px",Font.BOLD); jg.drawString("Some Text",20,50); |
| drawImage( "src", X, Y, width, height ); 在指定的位置画图像, ”src” 参数指定图像所在路径, width 和 height 参数允许调整图像宽高。 | jg.drawImage("friendlyDog.jpg", 20,50,100,150); |
| paint(); 必须显示调用,才能真正在 html 页面上画图形,不推荐每隔一段(每画一个图形)就调用一次。 像下面这样的调用应该避免 : jg.drawEllipse(0, 0, 100, 100); jg.paint(); jg.drawLine(200, 10, 400, 40); jg.paint(); ...
像下面这样的调用性能会很高 : jg.drawEllipse(0, 0, 100, 100); jg.drawLine(200, 10, 400, 40); /*... 还有其它画的方法 ... */ jg.paint(); // 最后调用 paint() | jg.paint(); |
| clear(); 与图形对象关联的 div 画布中的图形被清除(在 div 中不是由这个图形对象创建的内容是不会被改变的) | jg.clear();
|
| setPrintable( true ); 默认情况下,打印这些图形是不太可行的,因为浏览器的默认打印设置中会关闭打印背景,调用 setPrintable() ,并设置参数为 true ,将重置图形为可打印的(至少在 Mozilla/Netscape 6+ and IE 中) | jg.setPrintable(false);
|