// 在坐标(10,50)创建宽320,高200的画布

var paper = Raphael(10, 50, 320, 200);

// 在坐标(x = 50, y = 40)绘制半径为 10 的圆

var circle = paper.circle(50, 40, 10);

// 给绘制的圆圈填充红色 (#f00)

circle.attr("fill", "#f00");

// 设置画笔(stroke)的颜色为白色

circle.attr("stroke", "#fff");

//高600 宽600 直角坐标系

paper.path("M0 0 V600,H600");

//M = moveto   参数:(x y)  // 移动到

//L = lineto  参数:(x y)        //直线

//H = horizontal lineto    参数:(x)   //水平

//V = vertical lineto   参数:(y)         //垂直

//C = curveto   参数:(x1 y1 x2 y2 x y)  //弧线

//S = smooth curveto   参数:(x2 y2 x y)  //光滑的弧线

//Q = quadratic Belzier curve   参数:(x1 y1 x y)  //二次贝塞尔曲线曲线

//T = smooth quadratic Belzier curveto   参数:(x y)  //光滑二次贝塞尔曲线曲线

//A = elliptical Arc    参数:(rx ry x-axis-rotation large-arc-flag sweep-flag x y) //椭圆弧

//Z = closepath   参数(none)   //闭合

raphael画图的更多相关文章

  1. 使用Raphael 画图(二) 扩展的图形 (javascript)

    看这文章前,建议先看第一编文章<使用Raphael 画图(一) 基本图形 (javascript)>. 在Raphael基础上扩展的图形: 要运行该例子要引入附件的2个js包.(g.rap ...

  2. 对Raphael画图标的一个jquery简单封装

    公司要做一个项目的demo,要求地图上可以插红旗,所以就用到了Raphael. 因为是个demo,所以地图就用了一张图片,效果如下: 所以为了更好的封装一下这个功能,就写了一个简单的插件:jquery ...

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

    Raphael是什么? Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操 ...

  4. 利用raphael画图

    raphael是一个js的矢量库,可以js操作DOM可以实现柱形图.走势图等一些基本的图形: 一.使用: 在html中设置<div class="my"></di ...

  5. 使用Raphael 画图(四) 路径(一) (javascript)

    这章介绍路径,本人觉得这是比较难和精髓的一部分. 先介绍基本知识: 可以参考: http://www.chinasvg.com/support/svg-tutorial/svg-path-direct ...

  6. 使用Raphael 画图(三) 事件 (javascript)

    这章展示事件例子. 下图是官方API的事件: 例子: var butt1 = paper.set(); var a1 = paper.circle(24.833, 26.917, 26.667).at ...

  7. jquery简单封装

    对Raphael画图标的一个jquery简单封装 公司要做一个项目的demo,要求地图上可以插红旗,所以就用到了Raphael. 因为是个demo,所以地图就用了一张图片,效果如下: 所以为了更好的封 ...

  8. raphael入门到精通---入门篇之总览

    什么是Raphael raphael.js是一小巧的javascript库,它可以在web上画矢量图简化你的工作,如果你想创建你指定的图表,图形区域或者可移动的组件,那么就使用raphael吧 话不多 ...

  9. Raphael Js矢量库API简介:

    Raphael Js矢量库API简介:Raphael Javascript 是一个 Javascript的矢量库. 2010年6月15日,著名的JavaScript库ExtJS与触摸屏代码库项目jQT ...

随机推荐

  1. SSI框架中配置log4j

    事实上主要是log4j配置,跟SSI关系不大. web.xml中加入 <context-param> <param-name>log4jConfigLocation</p ...

  2. window.showModalDialog 与window.open传递参数的不同?

    简单的说,就是一个在弹出窗口之后可以做其它的事,即window.open 另一个在弹出窗口之后不能做其它的事,只能是关闭了当前的窗口之后才能做其它的事,即window.showModalDialog ...

  3. Quartz中Cron表达式使用方法

    Quartz中CronTrigger支持日历相关的反复时间间隔(比方每月第一个周一运行),而不是简单的周期时间间隔. 它的调度规则基于 Cron 表达式. 以下就来说一下Cron表达式的规则及使用方法 ...

  4. android UI设计时须要注意遵循的设计原则

    1.Android设备屏幕尺寸分布 首先看一下各种屏幕的尺寸和屏幕密度划分,下图是各种屏幕尺寸相应的范围: 从上图能够看出.相应normal尺寸的屏幕范围集中在常见的3到5寸屏之间.large尺寸相应 ...

  5. cocos2d-x中CCCallFunc CCCallFuncN CCCallFuncND的区别和使用示例

    转自:http://xiandanboke.com.cn/cocos2d-xcccallfunc.html CCCallFunc CCCallFuncN CCCallFuncND的区别和使用 CCCa ...

  6. [原创]SQL SERVER 2008R2安装

    配置系统环境说明 操作系统:Windows 7 操作系统版本:旗舰版 SP1 操作系统位数:x64 注:其它系统配置也基本相似,只是可能菜单的名字或者所处位置不一样,具体的配置如有不同,请自行搜索 安 ...

  7. 在 linux(ubuntu) 下 安装 LibSVM

    原文:http://blog.csdn.net/rav009/article/details/12995095 在安装LibSVM前需要先装 python 和 gnuplot linux 一般都自带了 ...

  8. JS控制输入框长度

    // 获取字符串的字节长度 function len(s) { s = String(s); return s.length + (s.match(/[^\x00-\xff]/g) || " ...

  9. 手动实现 KVO

    来源:伯乐在线 - Jerry4me 链接:http://ios.jobbole.com/88828/ 点击 → 申请加入伯乐在线专栏作者 我的Github地址 : https://github.co ...

  10. URL请求过程

    一.URL(Uniform Resource Locator)统一资源定位符,是可以从互联网上得到的资源的位置和访问方法的一种简洁表示,是互联网上标准资源的地址.互联网上的每一个文件都有一个唯一的UR ...