使用Raphael实现html中绘图

首先:下载Raphael的javascript库:http://raphaeljs.com/。或者在html页面<head></head>:如下

<script src="http://www.zfanw.com/blog/raphael.js"></script>

步骤:创建画布==>创建图形

创建画布:

创建画布的方法有两种,一种直接用坐标创建画布位置,另一种在html元素中创建画布

使用坐标创建:

var paper = Raphael(10, 50, 320, 200);//在浏览器窗口中,坐标 (10,50) 位置创建一个 canvas 对象,长320px,宽200px。

使用html元素中创建画布:

<div id="canvas"></div>

<script>     
    var paper=Raphael("canvas",320,200);//在 id 为 canvas元素中创建画布        </script>

创建图形:

新建图形:


var circle=paper.cicle(100,100,50);

设置图形参数:

 circle.attr({"fill":"green"});


你可能感兴趣的:(使用Raphael实现html中绘图)