使用Raphael 画图(一) 基本图形 (javascript)

最新推荐文章于 2022-09-16 14:47:59 发布

wawa129

最新推荐文章于 2022-09-16 14:47:59 发布

阅读量631

点赞数

分类专栏： Raphael 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/wawa129/article/details/84612437

版权

6 篇文章 0 订阅

订阅专栏

Raphael是什么？自己百度一下吧。

Raphael对主流浏览器兼容性很好。

开始要创建视图区域：

     Js代码   
     
var paper = Raphael("myDiv", 580, 600);//创建视图区域

接下来就可以画图形了。

1，画圆：

     Js代码   
     
var c = paper.circle(50, 89, 40);//画圆(x,y,r),r代表圆的半径

2，画矩形：

     Js代码   
     
var r = paper.rect(100, 19, 80, 50,10);//画矩形(x,y,width,height,r),r代表矩形圆角，默认为0

3，画椭圆：

     Js代码   
     
var e = paper.ellipse(50, 159, 40, 20);//画椭圆(x,y,rx,ry);

4，图片

     Js代码   
     
var i = paper.image("heffalump.png", 200, 19, 80, 80);//图片(src,x,y,width,height);

5，text：

     Js代码   
     
var t = paper.text(150, 250, "where\n amazing\n happens!");//text

6，路径：

     Js代码   
     
var p = paper.path("M10 10L 110 100");//路径

7，set：几个图形合并在一起，方便统一管理，我是这样理解的。

     Js代码   
     
   
var st = paper.set();//set  
 st.push(  
     paper.circle(330, 30, 15),  
     paper.circle(310, 30, 15)  
 );  

关注

专栏目录