<!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. Darkest page of my coding life

    The code i wrote a while ago recently caused a disaster and as I reviewed it I found it is the silli ...

  2. ACM: Long Live the Queen - 树上的DP

    Long Live the Queen Time Limit:250MS     Memory Limit:4096KB     64bit IO Format:%I64d & %I64u D ...

  3. 洛谷 洛谷 P1011 车站 Label：续命模拟QAQ 未知50分

    题目描述 火车从始发站(称为第1站)开出,在始发站上车的人数为a,然后到达第2站,在第2站有人上.下车,但上.下车的人数相同,因此在第2站开出时(即在到达第3站之前)车上的人数保持为a人.从第3站起( ...

  4. [知识点]C++中的运算符

    1.前言 之前最开始学习语法和基础知识的时候,基本上最简单的运算符有所接触,当时对于位运算这种东西完全没有概念.今天对C++中出现的部分运算符尤其是位运算符进行一些总结. 2.+ - * / % 这些 ...

  5. 【BZOJ3224】Tyvj 1728 普通平衡树 Splay

    Description 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作:1. 插入x数2. 删除x数(若有多个相同的数,因只删除一个)3. 查询x数的排名(若有多个相同的数 ...

  6. vim 使用笔记

    vim命令笔记 a 插入 insert 插入 :%!xxd 以16进制方式进行编辑 :%!xxd -r 从16进制还原

  7. javascrit2.0完全参考手册(第二版) 第1章第2节：javascript的历史和使用

    javascript曾经带给人许多误解,例如如果你不了解它的历史,那么你可能困惑它和java有什么关系,其实它们一点关系都没有.网景公司1995年在Navigator 2.0 中引入这门语言时它叫Li ...

  8. bootstrap如何给.list-group加上序号

    在bootstrap中,我们可以使用不带任何class的<ol>跟<li>来创建一个有序列表,但是如果加上list-group类,样式有了,但列表前面的数字却没了. Boots ...

  9. js打印功能

    1.window.print方式: jsp页面 打印按钮:       <input type="button" value="打印" onclick=& ...

  10. HTML DOM随笔

    编程接口 所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性. 方法是您能够执行的动作(比如添加或修改元素). 属性是您能够获取或设置的值(比如节点的名称或内容). getElemen ...