Raphael学习笔记（2）--绘图（基本图形）
生活随笔
收集整理的這篇文章主要介紹了
Raphael学习笔记（2）--绘图（基本图形）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
為什么80%的碼農都做不了架構師？>>> ??
1、圖形簡介?
與html5不同，Raphael提供了以下基本圖形：矩形、圓形、橢圓形（html5只有矩形）。
Paper.rect(x,y,width,height,r)：繪制矩形；
參數含義：
x,y：矩形左上角相對于原點(0,0)的坐標；
width,height：矩形的寬度和高度；
r：矩形圓角的半徑；
Paper.circle(x,y,r)：繪制圓形；
參數含義：
x,y：?圓心相對于原點(0,0)?的坐標；
r：圓的半徑；
Paper.ellipse(x,y,cx,cy)：繪制橢圓形；
參數含義：
x,y：?橢圓的圓心相對于原點(0,0)的坐標；
cx：橢圓橫軸的半徑；
cy： 橢圓縱軸的半徑?；
?
2、繪圖實例
下面讓我們看看代碼的書寫：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><script type="text/javascript" src="js/raphael.js"></script><script type="text/javascript" src="js/jquery-1.7.2.js"></script><style type="text/css">.wraper {position: relative;float: left;width: 400px;height: 400px;margin-left: 10px;margin-top: 10px;border: 1px solid orange;}</style><script type="text/javascript">$(document).ready(function(){var raphael = new Raphael('raphael_1',400,400);//繪制普通矩形raphael.rect(20,10,100,70);//繪制帶有圓角的矩形raphael.rect(20,100,100,70,20);//繪制圓形raphael.circle(200,50,40);//繪制橢圓形raphael.ellipse(330,50,50,30);raphael.ellipse(330,140,30,50);});</script></head> <body><div id="raphael_1" class="wraper"></div></body> </html>
代碼實現的效果：
轉載于:https://my.oschina.net/i33/blog/102419
總結
以上是生活随笔為你收集整理的Raphael学习笔记（2）--绘图（基本图形）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java在线购物B2C商城源码 单用户商
- 下一篇： app 图标规格参考表