html --- VML --- javascript --- 旋转矩形
矢量标记语言 --- Vector Markup Language
运行它的代码需要打开IE的兼容性视图
如有疑问请参考:http://msdn.microsoft.com/en-us/library/bb264280(VS.85).aspx
代码如下:
<html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <!-- VML requires VML namespace and behavior. --> <style> v\:* { behavior: url(#default#VML); } </style> <script type="text/javascript"> // Your JavaScript code will go here. //Flag to stop rectangle from spinning. var spin; //Flag to first call makeRect function var first = true; // Make rectangle. function makeRect() { //if not first call, return. if(first == false) return; first = false; // Create element in memory. var r = document.createElement("v:rect"); // Define width, height, color, and unique ID. r.style.width = 100; r.style.height = 100; r.fillcolor = "purple"; r.id = "myRect"; // Attach rectangle to the document at the the specified Div. var anchorDiv = document.getElementById('anchorDiv'); anchorDiv.appendChild(r); } // Set up the rotation. function rotateRect() { // Call spinRect function every 10 milliseconds. // The spin variable allows us to clear the call to setInterval. spin = setInterval("spinRect()", 10); } // Spin the rectangle by specified increment every time function called. function spinRect() { // Increment rectangle rotation by 1 degrees. var myRect = document.getElementById('myRect'); myRect.rotation += 1; } </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. --> <input type="BUTTON" value="Stop!" onclick="clearInterval(spin)"> <br><br> <!-- Node where new rectangle will be attached. --> <div id="anchorDiv" style="border: dotted"></div> </body> </html>
运行结果如下:
html --- VML --- javascript --- 旋转矩形的更多相关文章
- html --- SVG --- javascript --- 旋转矩形
可缩放矢量图形(英语:Scalable Vector Graphics,SVG)是基于可扩展标记语言(XML), 用于描述二维矢量图形的一种图形格式.SVG由W3C制定,是一个开放标准. 在 Inte ...
- 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 ...
- 矩形旋转碰撞,OBB方向包围盒算法实现
怎样进行2D旋转矩形的碰撞检測.能够使用一种叫OBB的检測算法(Oriented bounding box)方向包围盒.这个算法是基于SAT(Separating Axis Theorem)分离轴定律 ...
- 实现Canvas2D绘图 使元素绕中心居中旋转
我之前用canvas写了个头像剪切的demo,但是关于让载入的图片旋转是个问题,虽然通过其它方法实现了,但是感觉并不太好,于是查了些资料,想试着重新做一下canvas的旋转. 在开始之前,先让我们来做 ...
随机推荐
- JSP Session管理
本篇讲述JSP中session的相关知识和管理方法: 先说说cookie与session 在web中常用的两种用户信息管理方式:cookie 和 session. cookie是保存在用户客户端的 ...
- 处理11gR2 RAC集群资源状态异常INTERMEDIATE,CHECK TIMED OUT
注意节点6,7的磁盘CRSDG的状态明显不正常.oracle@ZJHZ-PS-CMREAD-SV-RPTDW06-DB-SD:~> crsctl status resource -t |less ...
- Mac显示和隐藏文件的命令
打开命令行输入即可,不过要重启Finder才能看到效果 显示: defaults write com.apple.finder AppleShowAllFiles -bool true 隐藏: def ...
- css 射线实现方法
一个斜的四边形 .top_ad_out::before { content: ''; position: absolute; z-index: -1; width: 336px; height: 25 ...
- framework-Binder
init进程fork servicemanager进程用来提供(server)注册service和(client)检索service功能.servicemanager维护了一个service列表,cl ...
- 【分享】Maven插件的源码下载(SVN)
偶然的情况下找到了Maven插件源码的网址,现分享下 http://svn.apache.org/repos/asf/maven/plugins/ 可以使用SVN下载,在添加新的资源路径时,把上面的网 ...
- leetcode:Sort List(一个链表的归并排序)
Sort a linked list in O(n log n) time using constant space complexity. 分析:题目要求时间复杂度为O(nlogn),所以不能用qu ...
- some resource favor
http://www.moxiemanager.com/getit/ : picture file manage with blur 可以和Tinymce结合使用完美实现WYSIWYG的效果 http ...
- HDU 3496 (二维费用的01背包) Watch The Movie
多多想看N个动画片,她对这些动画片有不同喜欢程度,而且播放时长也不同 她的舅舅只能给她买其中M个(不多不少恰好M个),问在限定时间内观看动画片,她能得到的最大价值是多少 如果她不能在限定时间内看完买回 ...
- UVa 673 Parentheses Balance【栈】
题意:输入一个包含"()"和"[]"的序列,判断是否合法 用栈来模拟,遇到"(",“[”就入栈,遇到')',']'就取出栈顶元素看是否匹配, ...