path jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Title</title>

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>

<script type="text/javascript" src="js/raphael.js"></script>

<script type="text/javascript" src="js/index004.js"></script>

</head>

<body>

</body>

</html>

path js:

$(function() {

    initRaphael();

});

function initRaphael(e) {

    // 这样会自动创建一个svg对象

    var paper = Raphael(0,0,300,300);

    var d = 'M10,30L60,30L10,80L60,80';

    var mark = paper.path(d);

    mark.attr({

        "stroke":"#F00",

        "stroke-width":3

    });

    mark.attr("fill","#00c");

}

other jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Title</title>

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>

<script type="text/javascript" src="js/raphael.js"></script>

<script type="text/javascript" src="js/index005.js"></script>

</head>

<body>

<div id="container"></div>

</body>

</html>

other js:

$(function() {

    initRaphael();

});

function initRaphael(e) {

    // 这样会根据container这个ID找到该对象

    var paper = Raphael('container',500,500);

    var dot = paper.circle(250,150,100);

    dot.attr({

        fill:'red',

        stroke:'green',

        'stroke-width':3

    });

    var d = paper.ellipse(100,100,50,20);

    var rec = paper.rect(100,10,50,20);

    // 图片会产生相应的缩放

    var fluffy = paper.image('1.jpg',25,20,100,100);

    fluffy.attr('stroke','green');

    fluffy.attr('stroke-width',3);

    var png = paper.image('a.png',200,200,80,65);

}

Raphael初始化，path，circle，rect，ellipse，image的更多相关文章

  1. EXTJS4自学手册——简单图形（circle,rect,text,path）

    一.画圆形: xtype: 'button', text: '画图一个圆', handler: function (btn) { Ext.create('Ext.window.Window', { l ...

  2. area标签circle/rect/poligon坐标

    <img src="images/02.gif" title="flower" usemap="#mm" /> <map ...

  3. 1．编写一个Java应用程序，该程序中有3个类：Ladder、Circle和主类A。具体要求如下：Ladder类具有类型为double的上底、下底、高、面积属性，具有返回面积的功能，包括一个构造方法对上底、下底、高进行初始化。Circle类具有类型为double的半径、周长和面积属性，具有返回周长、面积的功能，包括一个构造方法对半径进行初始化。主类A用来测试类Ladder和类Circle的功能。

    Ladder package com.hanqi.test; public class Ladder { //属性 double shangdi,xiadi,gao,mianji; //构造方法 La ...

  4. Raphael path 拖动实现

    让 Raphael 的 Path 动起来 Raphaël 是一个很实用的线上矢量图操作 Javascript 库.使用简单,一个值得一提的卖点是通过抽象出共同的接口屏蔽了 SVG 和 VML 之间的差 ...

  5. Leaflet：Path、Polyline、Polygon、Rectangle、Circle、CircleMarker

    下边介绍Vector Layer Path(Layer) Path是其他Vector Layer的父类,比如Polyline.Polygon.Rectangle.Circle.CircleMarker ...

  6. raphael 支持group(简)

    raphael 不支持group,里面有的set方法,只是把对象数组存起来,方法调用的时候,遍历都调用下,但是在实际需求上面感觉group还是瞒有用处的,可以控制group下面的节点的交互 比如地图区 ...

  7. Raphael Js矢量库API简介：

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

  8. 利用raphael画图

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

  9. SVG path d Attribute

    Scalable Vector Graphics (SVG) 1.1 (Second Edition) W3C Recommendation 16 August 2011 http://www.w3. ...

随机推荐

  1. BNUOJ 6038 - Reaux! Sham! Beaux!（模拟）

    这是一个水模拟,但是因为图片看不清,手打比较烧脑,我们错了好多次才过 #include<stdio.h> #include<iostream> #include<stri ...

  2. webapp之路--理解viewport的使用

    随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择.然而,每一款手机有不同的分辨率,不同屏幕 ...

  3. 利用dokan作虚拟磁盘开发

    dokan是用户态的文件系统驱动,可以称之为fuse for windows.可以用来开发虚拟磁盘,即在“我的电脑”中虚拟出一个硬盘来,可以是硬盘,也可以是可移动磁盘或者网络硬盘. CreateFil ...

  4. 二部图(二分图判定--dfs)

    题目链接:二部图 二部图 时间限制:1000 ms  |  内存限制:65535 KB 难度:1 描述 二 部图又叫二分图,我们不是求它的二分图最大匹配,也不是完美匹配,也不是多重匹配,而是证明一个图 ...

  5. ural1890 Money out of Thin Air

    Money out of Thin Air Time limit: 1.0 secondMemory limit: 64 MB Each employee of the company Oceanic ...

  6. H2最完整的资料下载地址：

    淡泊以明志,宁静以致远 博客园 首页 新随笔 联系 管理 订阅 随笔- 678  文章- 0  评论- 137  H2 database的使用   H2最完整的资料下载地址: http://downl ...

  7. 多线程编程--- __thread关键字

    __thread是GCC内置的线程局部存储设施,存取效率可以和全局变量相比.__thread变量每一个线程有一份独立实体,各个线程的值互不干扰.可以用来修饰那些带有全局性且值可能变,但是又不值得用全局 ...

  8. Quick Cocos2dx 与 DragonBones

    照着官方的例子试验了一下DragonBone的使用,代码如下: local AnotherScene = class("AnotherScene", function() retu ...

  9. 程序ajax请求公共组件：app-jquery-http.js

    // --------网络操作-------------------- $.HTTP = { getUrlParam : function(name) { var reg = new RegExp(& ...

  10. iOS 的三种自建证书方法https请求相关配置

    如果你的app服务端安装的是SLL颁发的CA,可以使用系统方法直接实现信任SSL证书,关于Apple对SSL证书的要求请参考:苹果官方文档CertKeyTrustProgGuide 这种方式不需要在B ...