raphael画图
// 在坐标(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画图的更多相关文章
- 使用Raphael 画图(二) 扩展的图形 (javascript)
看这文章前,建议先看第一编文章<使用Raphael 画图(一) 基本图形 (javascript)>. 在Raphael基础上扩展的图形: 要运行该例子要引入附件的2个js包.(g.rap ...
- 对Raphael画图标的一个jquery简单封装
公司要做一个项目的demo,要求地图上可以插红旗,所以就用到了Raphael. 因为是个demo,所以地图就用了一张图片,效果如下: 所以为了更好的封装一下这个功能,就写了一个简单的插件:jquery ...
- 使用Raphael 画图(一) 基本图形 (javascript)
Raphael是什么? Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操 ...
- 利用raphael画图
raphael是一个js的矢量库,可以js操作DOM可以实现柱形图.走势图等一些基本的图形: 一.使用: 在html中设置<div class="my"></di ...
- 使用Raphael 画图(四) 路径(一) (javascript)
这章介绍路径,本人觉得这是比较难和精髓的一部分. 先介绍基本知识: 可以参考: http://www.chinasvg.com/support/svg-tutorial/svg-path-direct ...
- 使用Raphael 画图(三) 事件 (javascript)
这章展示事件例子. 下图是官方API的事件: 例子: var butt1 = paper.set(); var a1 = paper.circle(24.833, 26.917, 26.667).at ...
- jquery简单封装
对Raphael画图标的一个jquery简单封装 公司要做一个项目的demo,要求地图上可以插红旗,所以就用到了Raphael. 因为是个demo,所以地图就用了一张图片,效果如下: 所以为了更好的封 ...
- raphael入门到精通---入门篇之总览
什么是Raphael raphael.js是一小巧的javascript库,它可以在web上画矢量图简化你的工作,如果你想创建你指定的图表,图形区域或者可移动的组件,那么就使用raphael吧 话不多 ...
- Raphael Js矢量库API简介:
Raphael Js矢量库API简介:Raphael Javascript 是一个 Javascript的矢量库. 2010年6月15日,著名的JavaScript库ExtJS与触摸屏代码库项目jQT ...
随机推荐
- Codeforces Gym 100015F Fighting for Triangles 状压DP
Fighting for Triangles 题目连接: http://codeforces.com/gym/100015/attachments Description Andy and Ralph ...
- hdu 5258 数长方形 离散化
数长方形 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5258 Des ...
- Codeforces Round #310 (Div. 1) A. Case of Matryoshkas 水题
C. String Manipulation 1.0 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contes ...
- [Unity3D]Unity3D游戏开发之使用EasyTouch虚拟摇杆控制人物移动
大家好,欢迎大家关注我的博客,我是秦元培,我的博客地址是blog.csdn.net/qinyuanpei.今天呢,我们来一起学习在Unity3D中使用EasyTouch虚拟摇杆来控制人物移动.虽然Un ...
- static使用方法小结
static使用方法小结 statickeyword是C, C++中都存在的keyword, 它主要有三种使用方式, 当中前两种仅仅指在C语言中使用, 第三种在C++中使用(C,C++中详细细微操作不 ...
- 《linux 内核全然剖析》 chapter 2 微型计算机组成结构
微型计算机组成结构 系统的基本组成: 软件是一种控制硬件操作和动作的指令流. 2.1 微型计算机的组成原理 当中CPU通过地址线,数据线,和控制信号线组成的内部总线与系统其它部分进行数据通信.地址线用 ...
- 视频流服务器配置[windows平台][转]
视频流服务器配置[windows平台] 搭建一个Flv视频播放服务器 作者:笨小孩 发布于:2013-9-1 20:18 分类:环境架设 IIS,Apache,Nginx环境都可以很好的支持视频的播放 ...
- [Express] Level 3: Massaging User Data
Flexible Routes Our current route only works when the city name argument matches exactly the propert ...
- curl命令具体解释
对于windows用户假设用Cygwin模拟unix环境的话,里面没有带curl命令,要自己装,所以建议用Gow来模拟,它已经自带了curl工具,安装后直接在cmd环境中用curl命令就可,由于路径已 ...
- Microsoft Robotics Developer Studio 4
Microsoft Robotics Developer Studio 4 Share Language: English Download Microsoft® Robotics ...