文档章节

Raphael学习笔记(2)--绘图(基本图形)

i33
 i33
发布于 2013/01/16 11:06
字数 316
阅读 146
收藏 1

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、绘图实例

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
	<script type="text/javascript" src="js/raphael.js"></script>
	<script type="text/javascript" src="js/jquery-1.7.2.js"></script>

  	<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">
		$(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>

代码实现的效果:


本文转载自:http://lblovesnow-163-com.iteye.com/blog/1480475

i33

i33

粉丝 46
博文 241
码字总数 7442
作品 0
东城
私信 提问
Web 开发中的矢量绘图处理和应用

矢量绘图一直是 Web 开发中一直比较薄弱的环节。本文首先针对不同浏览器详细阐述不同的矢量绘图解决方案,其中包括 HTML5 Canvas、SVG 以及 VML 等技术;之后针对每种不同的技术介绍其实现和...

IBMdW
2011/09/03
2.1K
0
Web开发中的矢量绘图(vml,svg)处理和应用

前言 1991 年物理学家 Tim Berners-Lee 首次在因特网上发布了 HTML 的第一版描述规范文档。经过了 20 多年的发展,HTML 语言成为如今编程最为广泛的语言和互联网上采用最广的文档格式。虽然 ...

kevin_pang
2014/02/25
485
0
使用javascript实现跨浏览器绘图相关..

HTML里DOM的canvas对象可以画出各式各样的2D 3D图象,甚至游戏.但IE不支持这个对象,微软不想让javascript太强大. 可以通过SVG/VML+JS模拟canvas来实现跨浏览器的矢量图形实现方案. 这其实和网...

喔喔兒
2011/04/10
343
0
Raphael学习笔记(5)--绘图(路径【椭圆曲线】)

1、椭圆曲线简介 前面的学习笔记:Raphael学习笔记(3)--绘图(路径【直线】)简单的描述了绘制椭圆曲线的参数,但没有详细的介绍各个参数的含义,这次,我们就详细的学习一下椭圆曲线的绘制...

i33
2013/01/16
642
0
《WebGL编程指南》学习笔记——3.在Canvas中使用WebGL

《WebGL编程指南》学习笔记——2.在Canvas中使用WebGL 上一节学习了使用< canvas >元素绘制二维图形,这一节里面我们在< canvas >中使用WebGL 下小节我们正式开始学习如何在< canvas >中使用...

hushhw
2017/12/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot系列:Spring Boot集成Spring Cache

一、关于Spring Cache 缓存在现在的应用中越来越重要, Spring从3.1开始定义了org.springframework.cache.Cache和org.springframework.cache.CacheManager接口来统一不同的缓存技术,并支持使...

杨小格子
23分钟前
7
0
二、MySql存储引擎简介(笔记)

MySql体系 先来看一下MySql的架构图: MySql的存储引擎在架构的最下层,提供了各式各样的存储特性,下面介绍几个常用的存储引擎。 MyISAM 官方提供的一个存储引擎,在数据库的系统表和系统生...

XuePeng77
昨天
4
0
聊聊nacos config的deleteConfig

序 本文主要研究一下nacos config的deleteConfig ConfigController nacos-1.1.3/config/src/main/java/com/alibaba/nacos/config/server/controller/ConfigController.java @Controller@Re......

go4it
昨天
5
0
面试:原来Redis的五种数据类型底层结构是这样的

关注我,可以获取最新知识、经典面试题以及微服务技术分享   在Redis中会涉及很多数据结构,比如SDS,双向链表、字典、压缩列表、整数集合等等。Redis会基于这些数据结构自定义一个对象系统...

ccww_
昨天
8
0
java发送html模板的高逼格邮件

最近做了一个监测k8s服务pod水平伸缩发送邮件的功能(当pod的cpu/内存达到指定阈值后会水平扩展出多个pod、或者指定时间内pod数应扩展到指定数量),一开始写了个格式很low的邮件,像下面这样...

码农实战
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部