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 100463B Music Mess Hash 逻辑题
Music Mess Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100463/attachments ...
- 关于OPenGL和OSG的矩阵 (转)
关于OPenGL和OSG的矩阵 矩阵真的是一个很神奇的数学工具, 虽然单纯从数学上看, 它并没有什么特别的意义, 但一旦用到空间中的坐标变换,它就“一遇风云便成龙”, 大显神威了.简单的工具实现了复杂 ...
- Delphi开发OCX详细步骤总结
首先要弄明白你要写的OCX是用在客户端还是用在服务器端 假如用在客户端: 1.创建 打开delphi 7,选择菜单"new"->"other"- ...
- 【剑指offer】Q18:树的子结构
类似于字符串的匹配,我们总是找到第一个匹配的字符,在继续比較以后的字符是否所有同样,假设匹配串的第一个字符与模式串的第一个不同样,我们就去查看匹配串的下一个字符是否与模式串的第一个同样,相应到这里,就 ...
- 前端MVC框架对比
首先要特别说明一下,作者认为以下四个功能是十分重要的: UI Bindings(UI绑定):作者想说的不仅仅是模板,而是想谈一种在底层模型出现变化时,视图层能够自动相应地更新的陈述性方法.一旦您用过了 ...
- c#使用MethodInvoker解决跨线程访问控件
功能函数测试集锦(77) C#专区(114) 版权声明:本文为博主原创文章,未经博主允许不得转载. .net 原则上禁止跨线程访问控件,因为这样可能造成错误的发生,有一种方法是禁止编译器对跨线 ...
- Java 使用 Redis
安装 开始在 Java 中使用 Redis 前, 我们需要确保已经安装了 redis 服务及 Java redis 驱动,且你的机器上能正常使用 Java. Java的安装配置可以参考我们的 Ja ...
- Java最重要的21个技术点和知识点之JAVA基础
(一)Java最重要的21个技术点和知识点之JAVA基础 写这篇文章的目的是想总结一下自己这么多年JAVA培训的一些心得体会,主要是和一些java基础知识点相关的,所以也希望能分享给刚刚入门的Ja ...
- 通过布赛尔曲线以及CAShapeLayer的strokeStart 、strokeEnd 属性来实现一个圆形进度条
#import <UIKit/UIKit.h> @interface CircleProgressView : UIView /**起始值(0-1)*/ @property(nonatom ...
- 关于js-binding中Layer触摸事件的优化
关于js-binding中Layer触摸事件的优化 cocos2d-x 3.7 1. 目前js中监听触摸事件带来的不便(特别是cocosbuilder) 在目前的js-binding中,如果要监听la ...