<!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. JS面向对象组件(一) ---包装对象与原型链

    首先我们可以看看平时我们常用的 var str = 'hello'; alert(typeof str); //string var str = new String("hello" ...

  2. Arduino "Card failed, or not present"（即找不到SD卡）错误解决方案

    http://forum.arduino.cc/index.php?topic=28763.0 Arduino SD自带的例程都是有一个BUG的,必须在pinMode后面加上如下的第二行代码 pinM ...

  3. linux xampp eclipse xdebug 无法进入断点

    一.xampp 版本 1.8.3-5 xampp安装后会自动集成xdebug,目录一般为 /opt/lampp/lib/php/extensions/***-debug-***目录 关于php 与ph ...

  4. 常见排序算法基于JS的实现

    一:冒泡排序 1. 原理 a. 从头开始比较相邻的两个待排序元素,如果前面元素大于后面元素,就将二个元素位置互换 b. 这样对序列的第0个元素到n-1个元素进行一次遍历后,最大的一个元素就“沉”到序列 ...

  5. ECSide标签属性说明之<ec:column>

    <ec:column>标签 ◆ 属性: columnId描述: 单元格的id,相当于<td>的id属性 ◆ 属性: title描述: 列在列表表头里显示的名称. ◆ 属性: p ...

  6. J2EE事务

    一.J2EE 事务处理方式 1. 本地事务:紧密依赖于底层资源管理器(例如数据库连接 ),事务处理局限在当前事务资源内.此种事务处理方式不存在对应用服务器的依赖,因而部署灵活却无法支持多数据源的分布式 ...

  7. RHadoop教程翻译系列 _Mapreduce(1)_第一个Mapreduce任务

    如果单从概念上来说,Mapreduce和R中的函数lapply, tapply并无差别,它们都是把元素转化成列,然后计算索引(Mapreduce中的键),最后合并成一个定义好的组合.首先,让我们看一个 ...

  8. iOS学习中的一些误区

    周二拿到offer之后,周三确定了去哪家,今天周四.今天是一个例外.中午写更新. 人到了不同的阶段,最重要的就是要更新自己的方法论.也就是说,不能穿新鞋,走老路,这样人就不会有大的突破. 下面我就分析 ...

  9. 集群重启后启动ambari-server访问Web页面无法启动集群解决

    集群重启后启动ambari-server访问Web页面无法启动集群解决 使用ambari部署的集群重新启动后,必须手动重启ambari-server和所有集群主机上的ambari-agent. amb ...

  10. 使用DNSPod来处理网站的均衡负载（转）

    add by zhj:配置倒是蛮简单的,其实就是把域名与多个IP进行关联,在数据库中实现这个应该也是蛮简单的. 原文:http://kb.cnblogs.com/page/75571/ 首先介绍下DN ...