RaphaelJS API NOTE – 创建画布

由于工作需要,最近在使用 RaphaelJS 开发基于 Web 的图形绘制软件,这里是我整理的一些学习 RaphaelJS 的 API 笔记。

Raphael() 函数

使用 RaphaelJS 做开发的第一步就是使用 Raphael() 函数在页面上创建画布。

语法

Raphael(container width, height[, callback]);

Raphael(x, y, width, height[, callback]);

参数说明

  • container {HTMLElement|String} – 可以是要创建画布元素的 id 或者 DOM 元素;
  • x {Number} – 画布在文档(body)的 x 坐标;
  • y {Number} – 画布在文档(body)的 y 坐标;
  • width {Number} – 画布的宽度;
  • height {Number} – 画布的高度;
  • callback {Function} – 可选,回调函数,在创建完画布后执行;

Raphael() 函数的API地址:http://dmitrybaranovskiy.github.io/raphael/reference.html#Raphael

创建画布

我们可以在指定的 DOM 元素内创建画布,也可以直接在body节点中创建画布。

在指定 DOM 元素中创建画布

在指定 DOM 元素中创建画布应该是我们用得最多的一种创建画布的方式,这时候 Raphael() 函数只接受3个必须的参数:container、width 和 height。代码如下:

// container 是元素的 ID(context)
var paper = Raphael('paper', '100%', '100%');

// container 是 DOM 元素
var container = document.getElementById('paper')
var paper = Raphael(container, '100%');

直接在文档的 body 元素中创建画布

RaphaelJS 也允许直接在文档的 body 元素中创建画布,这时候 Raphael() 函数只接受4个必须的参数:x、y、width 和 height。代码如下:

var paper = Raphael(0, 0, '100%', '100%');

x 和 y 表示的是从浏览器可见区域左上角开始计算的 top 和 left 值。

SHARE THIS PAGE

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

发表评论