函数名(方法)
|
示例代码(用
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
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);
|
相关推荐
wz_jsgraphics.js 专门用来绘制简单线条的 javaScript 的js包..简单实例可以去这里看看.. hi.baidu.com\johnny 自己汇总的..不是很全.谢谢
谁说JavaScript 不能画图呢? 从服务器端生成分析图再下载到游览器在服务器资源以及网络传输上都...资源中有wz_jsgraphics.js 3.03, 有其使用说明,还有一个简单的例子. 我试用了一下,可以的. 打算在一个项目中使用一下.
你是不是认为js就只能处理各文字检验,图片反转等等,你用js画过多变形吗,画过椭圆吗。来看人家写的这个js代码,从画线到画多变形。。。。强呀!
NULL 博文链接:https://xurichusheng.iteye.com/blog/2024844
该函数可以实现画各种线条、矩形、圆形等图形,通过鼠标点击获取起点位置和终点位置。
是一个非常详尽而有趣的JS库,它提供了绘制几何图形的功能,例如直线、圆、正方形
NULL 博文链接:https://wubinclat.iteye.com/blog/649882
js, 画图,画线, jsgraphics
JS库,用DIV来画图,在任何浏览器都可能画线
用jquery写的图表统计脚本 canvaschartpainter.js canvaschartpainter.src.js chart.js chart.src.js chartplugin.js excanvas.js iecanvas.htc iecanvas.js jgchartpainter.js ...wz_jsgraphics.js
js画图 js画图包及使用方法 wz_jsgraphics wz_jsgraphics使用
js画图包这是个德国人写的很强大,可以实现一般图形的绘制,填充。里面的统计图例子中js文件引入的路径有问题应该改为<script type="text/javascript" src="wz_jsgraphics.js"></script>
JSGraphics版本1.10,重新设计了类,更好的封装了私有函数,规范了公有函数接口,解决了firefox下不能显示问题
│ │ │ │ │ │ fckspellcheckcommand_gecko.js 441 bytes │ │ │ │ │ │ fckspellcheckcommand_ie.js 1.07 KB │ │ │ │ │ │ fckstylecommand.js 2.25 KB │ │ │ │ │ │ ...
利用js模拟仪表盘的实现利用jsgraphics.js库下载 后 打开仪表盘.html 然后将图层 拖拽宽和高 必须一样