RaphaelJS API NOTE – 绘制基本形状

Raphaël提供了绘制基本形状的矩形(Paper.rect()),圆形(Paper.circle())和椭圆形(Paper.ellipse())方法。这些是创建画布时返回的 Paper 对象的方法。

矩形 Paper.rect()

使用矩形方法 Paper.rect() 可以创建正方形和长方形。

语法

Paper.rect(x, y, width, height, [r]);

参数说明

  • x – 在画布中的 x (left)坐标;
  • y – 在画布中的 y (top)坐标;
  • width – 矩形的宽度;
  • height – 矩形的高度;
  • r – 矩形的圆角半径;

长方形

var rectangle = paper.rect( '50%', 50, 50, 100 );

演示地址:http://www.yaohaixiao.com/examples/raphael-js-api-note/rectangle.html

正方形

var square = paper.rect( '50%', 50, 100, 100, 10 );

演示地址:http://www.yaohaixiao.com/examples/raphael-js-api-note/square.html

圆形 Paper.circle()

使用圆形方法 Paper.circle() 可以创建圆形。

语法

Paper.circle(x, y, r);

参数说明

  • x – 在画布中的 x (left)坐标;
  • y – 在画布中的 y (top)坐标;
  • r – 半径;
var circle = paper.circle( '50%', 150, 50 );

演示地址:http://www.yaohaixiao.com/examples/raphael-js-api-note/circle.html

椭圆形 Paper.ellipse()

使用椭圆形方法 Paper.ellipse() 可以创建椭圆形。

语法

Paper.ellipse(x, y, x-radius, y-radius);

参数说明

  • x – 在画布中的 x (left)坐标;
  • y – 在画布中的 y (top)坐标;
  • x-radius – x 方向的半径;
  • y-radius – y 方向的半径;
var ellipse = paper.ellipse(300, 40, 100, 50);

演示地址:http://www.yaohaixiao.com/examples/raphael-js-api-note/ellipse.html

SHARE THIS PAGE

免责声明:本站文章中的观点都是作者个人观点,并没有以任何方式反映他所属机构的意见。

发表评论