矢量标记语言 --- 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 --- 旋转矩形的更多相关文章

  1. html --- SVG --- javascript --- 旋转矩形

    可缩放矢量图形(英语:Scalable Vector Graphics,SVG)是基于可扩展标记语言(XML), 用于描述二维矢量图形的一种图形格式.SVG由W3C制定,是一个开放标准. 在 Inte ...

  2. cocos2d 判断旋转矩形是否包含某个点

    本来想画个图演示一下,但是折腾了一会发现画不好,我的win10系统没有安装office,以后再看的话再补上吧.不废话了. 如图所以,如果判断点P是否被矩形A所包含,非常容易.那么如果矩形A以中心点逆时 ...

  3. css3+javascript旋转的3d盒子

    今天写点css3,3d属性写的3d盒子,结合javascript让盒子随鼠标旋转起来 今天带了css3新属性3d <!DOCTYPE html> <html> <head ...

  4. 旋转矩形碰撞检测 OBB方向包围盒算法

    在cocos2dx中进行矩形的碰撞检测时需要对旋转过的矩形做碰撞检查,由于游戏没有使用Box2D等物理引擎,所以采用了OBB(Oriented bounding box)方向包围盒算法,这个算法是基于 ...

  5. RotateRect(旋转矩形)的倾斜旋转变换矫正

    在Opencv中的图像处理中,经常要用到minAreaRect()函数求最小外接矩形,该函数的返回值就是一个RotatedRect类对象. RotatedRect类定义如下: class CV_EXP ...

  6. javascript中矩形的碰撞检测---- 计算碰撞部分的面积

    今天在做一个拖拽改变元素排序的东西的时候,在做被拖动元素同时碰撞到两个元素时,究竟应该与哪个元素交换位置的问题上,纠结到崩溃,实在是想不到别的办法去做了,只能去想办法计算碰撞的面积. 这应该不是最合适 ...

  7. opencv HSV找颜色，找轮廓用最小旋转矩形框出

    #include <opencv2/opencv.hpp> #include<iostream> #include<string> using namespace ...

  8. 矩形旋转碰撞,OBB方向包围盒算法实现

    怎样进行2D旋转矩形的碰撞检測.能够使用一种叫OBB的检測算法(Oriented bounding box)方向包围盒.这个算法是基于SAT(Separating Axis Theorem)分离轴定律 ...

  9. 实现Canvas2D绘图 使元素绕中心居中旋转

    我之前用canvas写了个头像剪切的demo,但是关于让载入的图片旋转是个问题,虽然通过其它方法实现了,但是感觉并不太好,于是查了些资料,想试着重新做一下canvas的旋转. 在开始之前,先让我们来做 ...

随机推荐

  1. MyBatis学习总结_04_解决字段名与实体类属性名不相同的冲突

    一.准备演示需要使用的表和数据 CREATE TABLE orders( order_id INT PRIMARY KEY AUTO_INCREMENT, order_no VARCHAR(20), ...

  2. CentOS防火墙操作实例（启动、停止、开、闭端口）

    注:防火墙的基本操作命令: 查询防火墙状态: [root@localhost ~]# service   iptables status<回车>   停止防火墙: [root@localh ...

  3. Android 使用Application类保存应用的全局数据

    在实际应用我们经常需要对数据进行交互与保存,但Intent中默认的方法对传输数据是有类型限制的,当我们需要传输或保存一个复杂的泛型数据时,使用Application是一个很好的解决办法. 顾名思义,A ...

  4. 如何在Java 8中愉快地处理日期和时间

    Java 8新增了LocalDate和LocalTime接口,为什么要搞一套全新的处理日期和时间的API?因为旧的java.util.Date实在是太难用了. java.util.Date月份从0开始 ...

  5. LaTeX新人教程，30分钟从完全陌生到基本入门

    by Nan 对于真心渴望迅速上手LaTeX的人,前言部分可以跳过不看. 本教程面向对LaTeX完全无认知无基础的新人.旨在让新人能够用最简单快捷的方式,轻松入门,能够迅速使用LaTeX完成基本的文本 ...

  6. PHP代码优化技巧大盘点

    PHP优化的目的是花最少的代价换来最快的运行速度与最容易维护的代码.本文给大家提供全面的优化技巧. 1.echo比print快. 2.使用echo的多重参数代替字符串连接. 3.在执行for循环之前确 ...

  7. [HDOJ2830]Matrix Swapping II（胡搞）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2830 给一个矩阵只有0和1,矩阵的列可以和其他列交换无数次,问交换后整个矩阵形成的最大的全是1的子矩阵 ...

  8. linux vi 编辑器命令

    游标控制 h 游标向左移 j 游标向下移 k 游标向上移 l (or spacebar) 游标向右移 w 向前移动一个单词 b 向后移动一个单词 e 向前移动一个单词,且游标指向单词的末尾 ( 移到当 ...

  9. HDU 1394 (逆序数) Minimum Inversion Number

    原来求逆序数还可以用线段树,涨姿势了. 首先求出原始序列的逆序数,然后递推每一个序列的逆序数. #include <cstdio> #include <cstring> #in ...

  10. 浅谈网络爬虫爬js动态加载网页（三）

    上一篇讨论了web driver对动态网页的抓取与分析,可以很清楚的看出这是一种集中式处理方式,简单说,就是利用服务器,打开一个真正的brower,然后将需要解析的地址交给浏览器,浏览器去解析,然后将 ...