使用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"});


转载于:https://my.oschina.net/chenhao901007/blog/185629

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值