Raphael学习笔记（2）--绘图（基本图形）

最新推荐文章于 2024-03-31 09:50:39 发布

u010450065

最新推荐文章于 2024-03-31 09:50:39 发布

阅读量625

点赞数

1、图形简介

与html5不同，Raphael提供了以下基本图形：矩形、圆形、椭圆形（html5只有矩形）。

Paper.rect(x,y,width,height,r)：绘制矩形；

参数含义：

x,y：矩形左上角相对于原点(0,0)的坐标；

width,height：矩形的宽度和高度；

r：矩形圆角的半径；

Paper.circle(x,y,r)：绘制圆形；

参数含义：

x,y：圆心相对于原点(0,0) 的坐标；

r：圆的半径；

Paper.ellipse(x,y,cx,cy)：绘制椭圆形；

参数含义：

x,y：椭圆的圆心相对于原点(0,0)的坐标；

cx：椭圆横轴的半径；

cy：椭圆纵轴的半径；

2、绘图实例

下面让我们看看代码的书写：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>raphael 简单使用</title>

<style type="text/css">
        .wraper {
            position: relative;
            float: left;
            width: 400px;
            height: 400px;
            margin-left: 10px;
            margin-top: 10px;
            border: 1px solid orange;
        }
</style>
<script type="text/javascript" src="/health/svg/js/raphael.js"></script>
<script type="text/javascript" src="/health/svg/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var raphael = new Raphael('raphael_1',400,400);

    //绘制普通矩形
    raphael.rect(20,10,100,70);
    //绘制带有圆角的矩形
    raphael.rect(20,100,100,70,20);

    //绘制圆形
    raphael.circle(200,50,40);

    //绘制椭圆形
    raphael.ellipse(330,50,50,30);
    raphael.ellipse(330,140,30,50);

});

</script>
</head>

<body>
<div id="raphael_1" class="wraper"></div>
</body>
</html>

代码实现的效果：