Raphael初始化，path，circle，rect，ellipse，image

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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:

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);}