<!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. Codeforces Round #250 (Div. 2) A. The Child and Homework

    注意题目长度不能考虑前缀,而且如果即存在一个选项的长度的两倍小于其他所有选项的长度,也存在一个选项的长度大于其他选项长度的两倍,则答案不是一个好的选择,只能选择C. #include <iost ...

  2. NOI OpenJudge 8469 特殊密码锁 Label贪心

    描述 有一种特殊的二进制密码锁,由n个相连的按钮组成(n<30),按钮有凹/凸两种状态,用手按按钮会改变其状态. 然而让人头疼的是,当你按一个按钮时,跟它相邻的两个按钮状态也会反转.当然,如果你 ...

  3. POJ 1329 Circle Through Three Points(三角形外心)

    题目链接 抄的外心模版.然后,输出认真一点.1Y. #include <cstdio> #include <cstring> #include <string> # ...

  4. 关于webdriver中弹出框的定位

    对于webdriver中弹出框的定位,需要引入这个包: import org.openqa.selenium.Alert; 具体语句为: Alert alert= driver.switchTo(). ...

  5. 遍历Map的两种方法(有排序)

    初始化一个map Map<String, String> map = new HashMap<String, String>(); map.put("1", ...

  6. 在mapreduce中做分布式缓存的问题

    一.问题描述: 主要解决一个问题,就是两个表做join,两个表都够大,单个表都无法装入内存. 怎么做呢?思路就是对做join的字段做排序两个表都排序,然后针对一个表a逐行读取,希望能够在内存中加载到另 ...

  7. winfrom 无边框窗体移动和阴影

    无边框窗体移动: //窗体移动API [DllImport("user32.dll")] public static extern bool ReleaseCapture(); [ ...

  8. Address already in use:JVM_Bind

    1.原因:端口被占用 2.解决方式: 方式一:重启电脑 方式二:方式一不行执行方式二 双击Tomcat server   将Ports下HTTP/1.1对应的Port Number 改为其他值 备注: ...

  9. Hibernate和Mybatis的对比

    http://blog.csdn.net/jiuqiyuliang/article/details/45378065 Hibernate与Mybatis对比 1. 简介 Hibernate:Hiber ...

  10. UIBezierPath 的使用

    使用UIBezierPath类可以创建基于矢量的路径,这个类在UIKit中.此类是Core Graphics框架关于path的一个封装.使用此类可以定义简单的形状,如椭圆或者矩形,或者有多个直线和曲线 ...