<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>变形</title>

    <script type="text/javascript">

        window.onload = function () {

            var canvas = document.getElementById("myCanvas");

            var context = canvas.getContext("2d");

            //1.旋转

            context.translate(200, 200);  //平移到正方形中心

            var deg = 360;

            setInterval(function () {

                rotate(deg * 180 / Math.PI);

                deg/4;

            }, 100)

            var rotate = function (deg) {

                context.rotate(deg);

                context.fillRect(-50, -50, 100, 100);

                context.clearRect(-50, -50, 100, 100);

                context.beginPath();

                context.moveTo(-100, -100);

                context.lineTo(100, 100);

                context.moveTo(-100, 100);

                context.lineTo(100, -100);

                context.closePath();

                context.strokeStyle = "#00ff00";

                context.stroke();

            }

        }

    </script>

</head>

<body>

    <canvas id="myCanvas" width="1000" height="1000">

        您的浏览器暂不支持画布！

    </canvas>

</body>

</html>

canvas 动态飞速旋转的矩形的更多相关文章

  1. 第165天：canvas绘制圆环旋转动画

    canvas绘制圆环旋转动画——面向对象版 1.HTML 注意引入Konva.js库 <!DOCTYPE html> <html lang="en"> &l ...

  2. 微信小程序分享朋友圈 长海报 canvas 动态高度计算

    业务场景 在微信中 小程序无法分享到朋友圈,目前大部分的解决方案都是,canvas动态绘制 生成图片后,保存到用户相册,用户进行分享照片到朋友圈,朋友圈打开图片后识别二维码进入小程序,达到分享目的 g ...

  3. canvas动态小球重叠效果

    前面的话 在javascript运动系列中,详细介绍了各种运动,其中就包括碰壁运动.但是,如果用canvas去实现,却是另一种思路.本文将详细介绍canvas动态小球重叠效果 效果展示 静态小球 首先 ...

  4. Canvas 动态小球重叠效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. canvas实现鼠标拖拽矩形移动改变大小

    项目的一个新需求,动态生成矩形框,鼠标点击拖动改变矩形框的位置,并可以调整大小. 之前做过一个小demo,需求类似,但是在canvas内只有一个矩形框,拖动移动,当时记得是用isPointInPath ...

  6. canvas标签(1)--线条、矩形、圆形、文本、阴影、抛小球

    从网上扒拉的代码,敲了敲代码玩. html页面显示内容很简单,只要写个canvas标签,给他一个id写js就可以了 <!DOCTYPE html> <html> <hea ...

  7. html5原生canvas内image旋转

    目前理解下来就是旋转的不是image本身,而是要drawImage的那个canvas的2d context,context本身的绘制就是把图片本来的样子draw出来,至于旋转,透明度之类的效果都是对c ...

  8. html5 canvas围绕中心点旋转

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Android canvas rotate():平移旋转坐标系至任意原点任意角度-------附：android反三角函数小结

    自然状态下,坐标系以屏幕左上角为原点,向右是x正轴,向下是y正轴.现在要使坐标系的原点平移至任一点O(x,y),且旋转a角度,如何实现? 交待下我的问题背景,已知屏幕上有两点p1和p2,构成直线l.我 ...

随机推荐

  1. python numpy sum函数用法

    numpy.sum numpy.sum(a, axis=None, dtype=None, out=None, keepdims=False)[source] Sum of array element ...

  2. IT技术人士 不能一辈子靠技术生存

    我现在是自己做,但我此前有多年在从事软件开发工作,当回过头来想一想自己,觉得特别想对那些初学JAVA/DOT.NET技术的朋友说点心里话,希望你们能从我们的体会中,多少受点启发(也许我说的不好,你不赞 ...

  3. String定义与方法

    //5种构造方法 public void Con(){ String str = "sfaj"; String str1 = new String("sfajdf&quo ...

  4. centos6.5 安装fctix 五笔输入法

    摸索了大半晚上,终于搞定,网上的东西看了N多篇不是这问题就是那问题,看来不同的OS下,小白我还是太嫩了些. 1,删除输入法,这一步是清除输入法,操作完成后,桌面/系统/首先项/输入法的IM Choos ...

  5. linux静态与动态库创建及使用实例

    一,gcc基础语法: 基本语法结构:(由以下四部分组成) gcc -o 可执行文件名 依赖文件集(*.c/*.o) 依赖库文件及其头文件集(由-I或-L与-l指明) gcc 依赖文件集(*.c/*.o ...

  6. Dubbo原理解析-注册中心之Zookeeper协议注册中心

    下面我们来看下开源dubbo推荐的业界成熟的zookeeper做为注册中心, zookeeper是hadoop的一个子项目是分布式系统的可靠协调者,他提供了配置维护,名字服务,分布式同步等服务.对于z ...

  7. Selenium2Library系列 keywords 之 _SelectElementKeywords 之 unselect_from_list_by_value(self, locator, *values)

    def unselect_from_list_by_value(self, locator, *values): """Unselects `*values` from ...

  8. js正则表达式中=s.g表示什么意思

    //g是全局匹配//中间的内容表示:匹配以=开关,后面是0或多个空格,然后是双引号括起来的任意字符,比如:= "any symble" 匹配 = " asfjaskldf ...

  9. 数往知来C#之 正则表达式 委托 XML<六>

    C# 正则表达式篇 一.正则表达式 正则表达式就是一个字符串,不要想着一下子可以写出一个通用的表达式,先写,不正确再改 写正则表达式就是在找规律 关键字:Regex    -->引入命名空间  ...

  10. adb device出现error：unknown host service

    最近在windows下使用adb device时,提示“ADB server didn't ACK” & “error: unknown host service”错误. 网上搜索了下,是说a ...