html --- SVG --- javascript --- 旋转矩形
可缩放矢量图形(英语:Scalable Vector Graphics,SVG)是基于可扩展标记语言(XML),
用于描述二维矢量图形的一种图形格式。SVG由W3C制定,是一个开放标准。
在 Internet Explorer 10(Quirks 和 IE10 文档模式)中,矢量标记语言 (VML) 已过时。
如有疑问请参考:http://msdn.microsoft.com/zh-cn/library/ie/hh801223
更多疑问请参考:http://zh.wikipedia.org/wiki/SVG
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title>旋转矩形</title>
- <script>
- // Global variables.
- // Define SVG namespace.
- var svgNS = "http://www.w3.org/2000/svg";
- // Placeholder for parent SVG element to be created.
- var mySvg;
- // Placeholder for rectangle object to be created.
- var myRect;
- // Flag to stop rectangle spinning.
- var spin;
- // Initial angle to start rotation from.
- var myAngle = 0;
- // Values of center of rotation.
- var myX = 250;
- var myY = 150;
- // Make Rectangle.
- function makeRect() {
- if(document.getElementsByTagNameNS(svgNS, "svg").length != 0 )
- return;
- /*
- * createElementNS() 方法可创建带有指定命名空间的元素节点
- * setAttributeNS() 方法创建或改变具有命名空间的属性
- */
- // Create parent SVG element with width and height.
- mySvg = document.createElementNS(svgNS,"svg");
- mySvg.setAttributeNS(null,"width", "800px");
- mySvg.setAttributeNS(null,"height", "450px");
- // Create rectangle element from SVG namespace.
- myRect = document.createElementNS(svgNS,"rect");
- // Set rectangle's attributes.
- myRect.setAttributeNS(null,"width","145px");
- myRect.setAttributeNS(null,"height","90px");
- myRect.setAttributeNS(null,"x","200px");
- myRect.setAttributeNS(null,"y","100px");
- myRect.setAttributeNS(null,"fill","lightcoral");
- myRect.setAttributeNS(null,"stroke","deepskyblue");
- myRect.setAttributeNS(null,"stroke-width","5px");
- // Append rectangle to the parent SVG element.
- // Append parent SVG element to the div node.
- mySvg.appendChild(myRect);
- document.getElementById("myAnchor").appendChild(mySvg);
- }
- // Do the rotation every 10 milliseconds until cancelled.
- function rotateRect() {
- spin = setInterval("spinRect()", 10);
- }
- // Spin rectangle by 5 degrees.
- function spinRect() {
- // Rotation is a subset of the transform attribute.
- // Note the use of quotes and plus signs with variables in SVG attribute call.
- myRect.setAttributeNS(null,"transform","rotate(" + myAngle + "," + myX + "," + myY + ")");
- myAngle += 5;
- }
- </script>
- </head>
- <body>
- <br><br>
- <!-- Button to create rectangle. -->
- <input type="BUTTON" value="Make Rectangle" onclick="makeRect()">
- <!-- Button to rotate rectangle. -->
- <input type="BUTTON" value="Rotate Rectangle" onclick="rotateRect()">
- <!-- Button to close webpage with spin variable. -->
- <!-- clearInterval() 方法可取消由 setInterval() 设置的 timeout。
- clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。-->
- <input type="BUTTON" value="Stop!" onclick="clearInterval(spin)">
- <br><br>
- <!-- The rectangle will be attached to the document here. -->
- <div id="myAnchor"></div>
- </body>
- </html>
运行结果如下:
html --- SVG --- javascript --- 旋转矩形的更多相关文章
- html --- VML --- javascript --- 旋转矩形
矢量标记语言 --- Vector Markup Language 运行它的代码需要打开IE的兼容性视图 如有疑问请参考:http://msdn.microsoft.com/en-us/library ...
- cocos2d 判断旋转矩形是否包含某个点
本来想画个图演示一下,但是折腾了一会发现画不好,我的win10系统没有安装office,以后再看的话再补上吧.不废话了. 如图所以,如果判断点P是否被矩形A所包含,非常容易.那么如果矩形A以中心点逆时 ...
- css3+javascript旋转的3d盒子
今天写点css3,3d属性写的3d盒子,结合javascript让盒子随鼠标旋转起来 今天带了css3新属性3d <!DOCTYPE html> <html> <head ...
- 旋转矩形碰撞检测 OBB方向包围盒算法
在cocos2dx中进行矩形的碰撞检测时需要对旋转过的矩形做碰撞检查,由于游戏没有使用Box2D等物理引擎,所以采用了OBB(Oriented bounding box)方向包围盒算法,这个算法是基于 ...
- RotateRect(旋转矩形)的倾斜旋转变换矫正
在Opencv中的图像处理中,经常要用到minAreaRect()函数求最小外接矩形,该函数的返回值就是一个RotatedRect类对象. RotatedRect类定义如下: class CV_EXP ...
- javascript中矩形的碰撞检测---- 计算碰撞部分的面积
今天在做一个拖拽改变元素排序的东西的时候,在做被拖动元素同时碰撞到两个元素时,究竟应该与哪个元素交换位置的问题上,纠结到崩溃,实在是想不到别的办法去做了,只能去想办法计算碰撞的面积. 这应该不是最合适 ...
- opencv HSV找颜色,找轮廓用最小旋转矩形框出
#include <opencv2/opencv.hpp> #include<iostream> #include<string> using namespace ...
- SVG基础以及使用Javascript DOM操作SVG
SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...
- 矩形旋转碰撞,OBB方向包围盒算法实现
怎样进行2D旋转矩形的碰撞检測.能够使用一种叫OBB的检測算法(Oriented bounding box)方向包围盒.这个算法是基于SAT(Separating Axis Theorem)分离轴定律 ...
随机推荐
- Hadoop、Pig、Hive、Storm、NOSQL 学习资源收集
(一)hadoop 相关安装部署 1.hadoop在windows cygwin下的部署: http://lib.open-open.com/view/1333428291655 http://blo ...
- Getting Started with Mongoose and Node.js – A Sample Comments System | Dev Notes
In this post, we’re going to be creating a sample comments system using Node, Express and Mongoose. ...
- How to fix broken packages?(转)
Try Code: sudo apt-get update to update your package list.Then Code: sudo apt-get autoclean to clean ...
- Ubuntu下搭建java开发环境
JDK安装: 1. 在http://www.oracle.com/technetwork/java/javase/downloads/index.html上下载相应版本的JDK环境,这里我使用的是jd ...
- iPhone 屏幕上的 Home 键在哪里?(已解决)
「问」:iPhone屏幕上的Home键如何开启? 「答」:在[设置]-[通用]-[辅助功能]-[AssistiveTouch],打开即可.不需要下载什么App. [Settings] - [Gener ...
- mmm hardware/libhardware_legacy/power/
android源码目录下的build/envsetup.sh文件,描述编译的命令 - m: Makes from the top of the tree. - mm: Buil ...
- MongoDB 学习笔记(二) 高级查询
1.条件运算符 2.$all 匹配所有 3.$exists 判断字段是否存在 4.NUll 值处理 5.$mod 取模处理 6.$ne 不等于 7. $in 包含,与sql用法相同 8. $nin 不 ...
- minimum-number-of-arrows-to-burst-balloons(还挺好)
https://leetcode.com/problems/minimum-number-of-arrows-to-burst-balloons/ 与会议室排期问题,很相似. package com. ...
- C# Winform DataGridView分页功能的实现
// 1.定义几个所需的公有成员: ; //每页显示行数 ; //总记录数 ; //页数=总记录数/每页显示行数 ; //当前页号 ; //当前记录行 DataSet ds = new DataSet ...
- simplefactory简单工厂模式
简单工厂模式概述 又叫静态工厂方法模式,它定义一个具体的工厂类负责一些类的实例 优点 客户端不需要在负责对象的创建,从而明确了各个类的职责 缺点: 这个静态工厂类负责所有对象的创建, ...