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

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

<head>

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

<title>围绕中心点旋转</title>

<script src="js/modernizr.js"></script>

</head>

<body>

<script type="text/javascript">

window.addEventListener('load',eventWindowLoaded,false);

function eventWindowLoaded(){

    canvasApp();

}

function canvasSupport(){

    return Modernizr.canvas;

}

function canvasApp(){

    if(!canvasSupport()){

        return;

    }else{

        var theCanvas = document.getElementById('canvas')

        var context = theCanvas.getContext("2d")

    }

    drawScreen();

    function drawScreen(){

        context.fillStyle="black";

        context.fillRect(20,20,25,25);

        context.setTransform(1,0,0,1,0,0);

        var angleInRadians = 45 * Math.PI / 180;

        var x = 100;

        var y = 100;

        var width = 50;

        var height = 50;

        context.translate(x+.5*width,y+.5*height);

        context.rotate(angleInRadians);

        context.fillStyle="red";

        context.fillRect(-.5*width,-.5*height,width,height);

    }

}

</script>

<canvas id="canvas" width="500" height="500">

你的浏览器无法使用canvas

小白童鞋；你的支持是我最大的快乐！！

</canvas>

</body>

</html>

这一次我们设置了变量。。。是不是感觉看起来莫名的亲切了

        var x = 100;

        var y = 100;

        var width = 50;

        var height = 50;

然后我们用函数context.translate把画布原点平移到红色正方形的中心点。
这个函数可以将画布原点移到（x,y）处。这里将原点X坐标值设为红色正方形的左上角的X值（100）
加上其一半的宽度。使用前面创建的变量即可控制这个红色正方形的属性

X+0.5*width
然后Y坐标
然后执行平移函数
然后旋转

实现canvas以图片中心旋转

利用canvas的roate和translate方法实现按中心旋转的效果

新建html页

定义画布，以及图案的位置和大小参数

obj.x/y为长方形在canvas中的位置

obj.width/height为长方形的宽高

画一个简单的长方形，让它每100毫秒旋转1度

浏览器中打开页面会发现，旋转是以画布的左上角为圆心的

在旋转之前，把画布的中心位置translate到图片的中心

旋转之后，把中心translate回初始的位置，然后再绘制长方形

完成，浏览器打开页面，可以看到图案以中心旋转的效果

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">

    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

    <meta name="renderer" content="webkit">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title></title>

    <style type="text/css">

    canvas{

        position: absolute;

        border: 1px solid;

    }

    </style>

</head>

<body>

    <canvas id="canvas1" width="800" height="800"></canvas>

    <script type="text/javascript">

        var ctx1=canvas1.getContext('2d');

        var obj={

            x:100,

            y:200,

            width:200,

            height:400

        };

        /**

         * 画一个简单的长方形，让它每100毫秒旋转1度

         */

        //  浏览器中打开页面会发现，旋转是以画布的左上角为圆心的

        function rotate(){

            ctx1.clearRect(0,0,800,800);

            ctx1.fillStyle='blue';

            ctx1.rotate(Math.PI/180);

            ctx1.strokeRect(obj.x,obj.y,obj.width,obj.height);

            ctx1.fillRect(obj.x,obj.y,obj.width,obj.height);

        }

        // 在旋转之前，把画布的中心位置translate到图片的中心

        function rotate2(){

            ctx1.clearRect(0,0,800,800);

            ctx1.fillStyle='blue';

            ctx1.translate((obj.x+(obj.width/2)),(obj.y+(obj.height/2)));

            ctx1.rotate(Math.PI/180);

            ctx1.translate(-(obj.x+(obj.width/2)),-(obj.y+(obj.height/2)));

            ctx1.strokeRect(obj.x,obj.y,obj.width,obj.height);

            ctx1.fillRect(obj.x,obj.y,obj.width,obj.height);

        }

        // setInterval(rotate,100);

        setInterval(rotate2,100);

    </script>

</body>

</html>

html5 canvas围绕中心点旋转的更多相关文章

  1. HTML5 Canvas 小例子 旋转的图片

    <一>CSS部分 @charset "utf-8"; *{ padding:; margin:; outline: none; } #canvas{ position: ...

  2. html5 canvas防微博旋转

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

  3. HTML5 Canvas 小例子 旋转的时钟

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. html5 canvas多个图像旋转

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

  5. Html5 Canvas动画旋转的小方块；

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  6. html5 canvas旋转

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

  7. HTML5 Canvas 绘制旋转45度佛教万字

    效果如下: 代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Cont ...

  8. 一个坐标点围绕任意中心点旋转--C#实现

    假设对图片上任意点(x,y),绕一个坐标点(rx0,ry0)逆时针旋转RotaryAngle角度后的新的坐标设为(x', y'),有公式: x'= (x - rx0)*cos(RotaryAngle) ...

  9. HTML5 Canvas绘制转盘抽奖

    新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...

随机推荐

  1. ACM：POJ 2739 Sum of Consecutive Prime Numbers-素数打表-尺取法

    POJ 2739 Sum of Consecutive Prime Numbers Time Limit:1000MS     Memory Limit:65536KB     64bit IO Fo ...

  2. BZOJ4542: [Hnoi2016]大数

    Description 小 B 有一个很大的数 S,长度达到了 N 位:这个数可以看成是一个串,它可能有前导 0,例如00009312345.小B还有一个素数P.现在,小 B 提出了 M 个询问,每个 ...

  3. Bug:播放页面自动跳到首页

    一,经历: 1.第一感觉就是从直播间中收到了通知,然后通知得知了用户未登录,直播间便 pop 退出了. 2.由于这个问题是很难复现的,研究了快一个星期后,才发现是直播间底部的我的历史页面中接收到了直播 ...

  4. Hbase1.0 客户端api

    最近在试用Hbase1.0的客户端API,发觉变化还是挺大(以前版本也不熟).到处都是deprecated. 现在应该是这样子: Configuration  conf = HBaseConfigur ...

  5. FileUpload文件上传控件

    1.FileUpload控件的主要功能是向指定目录上传文件.FileUpload控件不会自动上传控件,而需要设置相关的事件处理程序,然后在程序中实现文件上传. 2.FileUpload控件常见的属性 ...

  6. SQL 中怎么查询一个数据库中一共有多少个表

    用户表:select count(*) 总表数 from sysobjects where xtype='u' 总表数:select count(*) 总表数 from sysobject s whe ...

  7. 李洪强iOS经典面试题137-内存管理

      内存管理 ARC处理原理 ARC是Objective-C编译器的特性,而不是运行时特性或者垃圾回收机制,ARC所做的只不过是在代码编译时为你自动在合适的位置插入release或autoreleas ...

  8. jQuery -> 获取元素的各种过滤器

    转自http://blog.csdn.net/feelang/article/details/26613023

  9. HTML--JS练习小游戏（别踩白块儿）

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

  10. Jenkins中Jelly基础、超链接、国际化

    Jelly基础 参考:https://wiki.jenkins-ci.org/display/JENKINS/Basic+guide+to+Jelly+usage+in+Jenkins UI Samp ...