<!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. 20145308刘昊阳 《Java程序设计》第4周学习总结

    20145308刘昊阳 <Java程序设计>第4周学习总结 教材学习内容总结 第六章 继承与多态 6.1 何谓继承 继承:面向对象中,为避免多个类间重复定义共同行为使用 把相同代码提升为父 ...

  2. Codeforces Round #249 (Div. 2) A - Queue on Bus Stop

    水题 #include <iostream> #include <vector> #include <algorithm> using namespace std; ...

  3. Leetcode Remove Nth Node From End of List

    Given a linked list, remove the nth node from the end of list and return its head. For example, Give ...

  4. NOIP 2005 等价表达式 (TYVJ P1060)

    做题记录: 2016-08-10 23:35:09 背景 NOIP2005 提高组 第四道 描述 明明进了中学之后,学到了代数表达式.有一天,他碰到一个很麻烦的选择题.这个题目的题干中首先给出了一个代 ...

  5. [Cocos2D-x For WP8]Label标签

    Label标签主要会用于在游戏中显示一些文字字符串类型的信息.那么在Cocos2D-x里面主要会有下面的一些创建标签的方式: 1.使用CCLabelTTF类生成系统文字的标签,编程语法如下: CCLa ...

  6. POJ 1141 Brackets Sequence(DP)

    题目链接 很早 很早之前就看过的一题,今天终于A了.状态转移,还算好想,输出路径有些麻烦,搞了一个标记数组的,感觉不大对,一直wa,看到别人有写直接输出的..二了,直接输出就过了.. #include ...

  7. 20145330第七周《Java学习笔记》

    20145330第七周<Java学习笔记> 第十三章 时间与日期 认识时间与日期 时间的度量 GMT(格林威治标准时间):现在不是标准时间 世界时(UT):1972年UTC出来之前,UT等 ...

  8. SQL 联合索引 与 单一列的索引 比较

    背景: 公司业务迅速扩展,很多网站.接口都因为大流量的数据,发生服务器习惯性死机:一条sql查询语句只能适用于一定的网络环境,没有优化的查询当遇上大数据时就不适用了. 本文主旨: 讨论什么情况下能利用 ...

  9. java mail(发送邮件--163邮箱)

    package com.util.mail; /** * 发送邮件需要使用的基本信息 */ import java.util.Properties; public class MailSenderIn ...

  10. js判断微信浏览器

    function is_weixin(){ //检查是否是微信浏览器 var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMes ...