<!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. Codeforce - Rock-Paper-Scissors

    Rock-Paper-Scissors is a two-player game, where each player chooses one of Rock, Paper, or Scissors. ...

  2. 【BZOJ】2924: [Poi1998]Flat broken lines

    题意 平面上有\(n\)个点,如果两个点的线段与\(x\)轴的角在\([-45^{\circ}, 45^{\circ}]\),则两个点可以连线.求最少的折线(折线由线段首尾相连)使得覆盖所有点. 分析 ...

  3. 【bzoj2631】tree link-cut-tree

    2016-06-01 08:50:36 题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2631 注意加和乘的标记下传问题. 还有就是split后 ...

  4. linux下搭建svn代码库

    1.安装svn客户端 2.创建svn代码库 1.安装svn客户端 1.1.使用命令安装 1)CentOS $ yum install subversion 2)ubuntu sudo apt-get ...

  5. asp.net发送邮件

    using System.Net.Mail; /// 发送邮件 /// </summary> /// <param name="sender"></p ...

  6. Node.js 手册查询-2-MongoDB数据库方法

    MongoDb 标签(空格分隔): 数据库 MongoDb 安装 当前版本 2.X 解压至任意目录,最好不要是c盘. 在根目录下建立一个文件夹用来存储工程 我的例子: 安装至: d:\mongodb ...

  7. Oracle数据库合并行记录，WMSYS.WM_CONCAT 函數的用法

    Sql代码 select t.rank, t.Name from t_menu_item t; 10 CLARK    10 KING    10 MILLER    20 ADAMS    20 F ...

  8. Java基础：继承，封装，多态，抽象类，接口

    只要是从事Java语言有关的开发工作,在面试中难念会被问到这几个东西. 博主学习java有两年多了,算是浅显的知道一些,抄写了一些解释分享一下. 1.什么是面向对象?(面对女朋友) 面向对象(Obje ...

  9. windows查看进程

    由端口到进程: 直接查看进程: 查看本机连接端口: 杀进程:  (eg:kill httpd) tskill  1596

  10. Java 异常讲解（转）

    六种异常处理的陋习 你觉得自己是一个Java专家吗?是否肯定自己已经全面掌握了Java的异常处理机制?在下面这段代码中,你能够迅速找出异常处理的六个问题吗?   1 OutputStreamWrite ...