HTML5SVG绘图

原创 2016年08月28日 23:31:26
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body {
			text-align: center;
		}
		svg {
			background: #f2f2f2;
		}
	</style>
</head>
<body>
	<!--*****创建矩形*****-->
	<h3>绘制矩形</h3>
	<svg width="500" height="500">
		<rect x="0" y="0" width="100" height="100"></rect>
		<rect x="400" y="0" width="100" height="100" fill="rgba(0,255,0,.5)"></rect>
		<rect x="0" y="400" width="100" height="100" fill="transparent" stroke-width="6" stroke="rgba(255,0,0,.5)"></rect>
		<rect x="400" y="400" width="100" height="100" style="fill:rgba(255,0,0,.5);stroke:#0f0;stroke-width:1;"></rect>
		<rect x="200" y="200" width="100" height="100" id="r1" style="stroke:#0f0;" fill="rgba(0,0,255,.5)"></rect>
	</svg>
	<script type="text/javascript">
		r1.onmousemove = function() {
			this.setAttribute("fill","rgba(0,0,255,.3)");
		}
		r1.onmouseout = function() {
			this.setAttribute('fill',"rgba(0,0,255,.5)");
		}
	</script>

	<svg width="500" height="500">
		<rect x="200" y="200" width="100" height="100" id="r2" fill="rgb(0,255,255)" opacity="1";></rect>
	</svg>
	<script type="text/javascript">
		r2.onclick = function() {
			var me = this;
			var time = setInterval(function() {
				var o = me.getAttribute('opacity');
				var h = me.getAttribute('height');
				var w = me.getAttribute('width');
				
				o = parseFloat(o);
				h = parseFloat(h);
				w = parseFloat(w);

				o -= 0.05;
				h += 5;
				w += 5;

				me.setAttribute('opacity',o);
				me.setAttribute('height',h);
				me.setAttribute('width',w);

				if (o <= 0) {
					clearInterval(time);
					me.parentNode.removeChild(me);
				}
			},100);
		}
	</script>
	<h1>点击生成方块</h1>
	<svg width="500" height="500" id="r3"></svg>
	<script type="text/javascript">
	//document.createElement()创建都是标准的HTML标签,不能用于创建SVG元素!
	//document.createElementNS('http://www.w3.org/2000/svg', 'SVG标签名'),使用此方法创建的标签才能被SVG解释器解析。
		r3.onclick = function(e) {
			var x = e.offsetX;
			var y = e.offsetY;
			var r = document.createElementNS('http://www.w3.org/2000/svg','rect');
			r.setAttribute("x",x);
			r.setAttribute("y",y);
			r.setAttribute("width",50);
			r.setAttribute("height",50);
			r.setAttribute("fill",rc());

			this.appendChild(r);
		}
		function rc(){
			var r = Math.floor(Math.random()*256);
			var g = Math.floor(Math.random()*256);
			var b = Math.floor(Math.random()*256);
			//return `rgb(${r},${g},${b})`;
			return "rgb("+r+","+g+","+b+")";
		}
	</script>

	<br>
	<!--*****绘制圆形*****-->
	<h3>绘制圆形</h3>
	<svg width="500" height="500">
		<!--cx x轴位置  cy y轴位置   r圆的半径-->
		<circle cx="50" cy="50" r="50" fill="#f00"></circle>
		<circle cx="450" cy="50" r="50" stroke="#0f0" fill="transparent"></circle>
		<circle cx="50" cy="450" r="50" stroke="#00f" fill="#ff0"></circle>
		<circle cx="250" cy="250" r="50" fill="#0ff" id="c1"></circle>
	</svg>

	<!--椭圆形-->
	<h3>绘制椭圆形</h3>
	<svg width="500" height="500">
		<ellipse cx="100" cy="50" rx="100" ry="50" fill="#ff0"></ellipse>
	</svg>

	<!-- 绘制直线 -->
	<h3>绘制直线</h3>
	<svg width="500" height="500">
		<line x1="50" y1="50" x2="100" y2="50" stroke="#ff0"></line>		<!-- x1 x轴起点 y1 y轴起点 x2 x轴到哪结束  y2 y轴到哪结束 -->
		<g stroke="#00f" stroke-width="30">		<!-- 可以把svg元素相同的属性放在一个元素租里,组员会自动集成小组的属性 -->
			<line x1="150" y1="50" x2="350" y2="50"></line>
			<line x1="50" y1="150" x2="100" y2="150"></line>
			<line x1="150" y1="150" x2="350" y2="150"></line>
		</g>
	</svg>

	<!-- 绘制折线 -->
	<h3>绘制折线</h3>
	<svg width="500" height="500">
		<polygon points="0,0 250,250 500,0" stroke="#ff0" stroke-width="5" fill="transparent"></polygon>
	</svg>

	<!-- 绘制文本 -->
	<h3>绘制文本</h3>
	<svg width="500" height="500">
		<text>文本内容</text>
	</svg>
</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

html5svg

什么是SVG: 1.SVG是指可伸缩矢量图形 2.SVG用来定义用于网络的基本矢量的图形 3,。SVG使用XML格式定义图形 4,SVG图像在放大或者改变尺寸的情况下其图形质量不会有损失 5,SVG是...
  • fzx1217020016
  • fzx1217020016
  • 2016年09月28日 15:49
  • 108

html5svg简介

学习笔记,暂存后续修改和完善 svg简单了解,用的不是很多。 效果图: 代码: svg简介 ...
  • qq_19558705
  • qq_19558705
  • 2016年01月12日 22:31
  • 3780

一种使用Qt快速绘图的思路

Qt 绘图 QtConCurrent
  • soso101
  • soso101
  • 2014年10月27日 18:16
  • 1788

LCD12864绘图操作

LCD12864
  • perry_peng
  • perry_peng
  • 2016年08月08日 21:57
  • 885

GDI+概述及双缓冲绘图技术

1.GDI概述及实例分析 1.1 GDI概述 GDI在全称是Graphics Device Interface,即图形设备接口。是图形显示与实际物理设备之间的桥梁。GDI使得用户无需关心具...
  • shenziheng1
  • shenziheng1
  • 2016年11月25日 15:53
  • 1396

qt之双缓冲绘图

转载自:https://wizardforcel.gitbooks.io/qt-beginning/content/22.html 导语 在前面一节中,讲述了如何实现简单的涂鸦板,这一次我们将...
  • baidu_33570760
  • baidu_33570760
  • 2017年05月12日 15:31
  • 1008

Android 2D绘图解析之 Canvas,Paint

【Android 2D绘图解析】系列文章将全面介绍Android绘图相关,这是第一篇,简单介绍下如何利用Android API进行一些简单图形的绘制,绘图的前提是需要继承自View,然后重写它的onD...
  • leejizhou
  • leejizhou
  • 2016年05月30日 08:44
  • 9982

WPF绘图

WPF的基本图形包括以下几个:Line:直线段,可以设置触笔(Stroke) Rectangle:矩形,既有触笔,又有填充(Fill) Ellicps:椭圆,长宽相等即为正圆,既有触笔又有填充 ...
  • HFDNGL
  • HFDNGL
  • 2015年11月02日 19:02
  • 934

QT学习笔记15绘图和绘图设备

1 QPainter Qt 的绘图系统允许使用相同的 API 在屏幕和其它打印设备上进行绘制。整个绘图系统基于QPainter,QPainterDevice和QPaintEngine三个类。 QPai...
  • lzjsqn
  • lzjsqn
  • 2017年02月07日 10:09
  • 551

关于c++/c#/java 多线程绘图问题说明

起初是在做android意识到主线程绘图的问题,只能在主线程中将图形绘制到屏幕上,在子线程中,也只能发送消息通知主线程绘图。后来看了下,所有语言亦是如此。作为初学者,我想不免会有疑问,为什么只能在主线...
  • nightwizard2030
  • nightwizard2030
  • 2016年06月28日 17:04
  • 765
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5SVG绘图
举报原因:
原因补充:

(最多只允许输入30个字)