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)分离轴定律 ...
随机推荐
- swift:入门知识之简单值
1.swift中用let关键字类定义常量,用var关键字来定义变量. 2.swift语句的结尾不需要再带逗号,系统在运行程序时自动会帮你添加上 3.一个变量或常量必须与赋值时拥有相同的类型. 4.如果 ...
- SRM 620 DIV1 L2
题意:有n个等长的string(设string的长度为m),string中的字符从'A'到'Z',容许对m列执行稳定的排序操作,问说是否能通过这m种操作将这n个string调整成对应的顺序. 题解: ...
- HDU 4620 Fruit Ninja Extreme 搜索
搜索+最优性剪枝. DFS的下一层起点应为当前选择的 i 的下一个,即DFS(i + 1)而不是DFS( cur + 1 ),cur+1代表当前起点的下一个.没想清楚,TLE到死…… #include ...
- java遍历Map时remove删除元素
public class T { /** * @param args */ public static void main(String[] args) { // TODO Auto-generate ...
- CrazePony飞行器--通信部分介绍【转】
转自:http://www.crazepony.com/wiki/comm-protocol.html 作者:nieyong 通信协议指的是遥控端和主控之间交互数据的封装,是一种自行约定的数据封装格式 ...
- 《Linux/Unix系统编程手册》读书笔记8 (文件I/O缓冲)
<Linux/Unix系统编程手册>读书笔记 目录 第13章 这章主要将了关于文件I/O的缓冲. 系统I/O调用(即内核)和C语言标准库I/O函数(即stdio函数)在对磁盘进行操作的时候 ...
- linux 系统 tar 的用法详解
[root@localhost xu]# tar --help 用法: tar [选项...] [FILE]... GNU ‘tar’ 将许多文件一起保存至一个单独的磁带或磁盘归档,并能从归档中单独还 ...
- HDU 4757 Tree(可持久化trie)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4757 题意:给出一棵树,节点有权值.每次询问x到y的路径上与z抑或的最大值. 思路:可持久化trie. ...
- 第五篇 Getting Started with ORACLE EBS(开始学习ORACLE EBS)
第一篇介绍了ERP软件是供应链管理软件.告诉你这个软件改善或提升企业管理的切入点和着力点.有了着力点才能给力. 第二篇介绍了什么是咨询以及咨询工作共通的章法,告诉了你咨询的套路是什么,就像练习一套拳, ...
- hdu 4405 Aeroplane chess(简单概率dp 求期望)
Aeroplane chess Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)T ...