1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>围绕中心点旋转</title>
  6. <script src="js/modernizr.js"></script>
  7. </head>
  8.  
  9. <body>
  10. <script type="text/javascript">
  11. window.addEventListener('load',eventWindowLoaded,false);
  12. function eventWindowLoaded(){
  13.     canvasApp();
  14. }
  15. function canvasSupport(){
  16.     return Modernizr.canvas;
  17. }
  18. function canvasApp(){
  19.     if(!canvasSupport()){
  20.         return;
  21.     }else{
  22.         var theCanvas = document.getElementById('canvas')
  23.         var context = theCanvas.getContext("2d")
  24.  
  25.     }
  26.     drawScreen();
  27.     function drawScreen(){
  28.         context.fillStyle="black";
  29.         context.fillRect(20,20,25,25);
  30.  
  31.         context.setTransform(1,0,0,1,0,0);
  32.         var angleInRadians = 45 * Math.PI / 180;
  33.         var x = 100;
  34.         var y = 100;
  35.         var width = 50;
  36.         var height = 50;
  37.         context.translate(x+.5*width,y+.5*height);
  38.         context.rotate(angleInRadians);
  39.         context.fillStyle="red";
  40.         context.fillRect(-.5*width,-.5*height,width,height);
  41.  
  42.     }
  43.  
  44. }
  45.  
  46. </script>
  47. <canvas id="canvas" width="500" height="500">
  48. 你的浏览器无法使用canvas
  49. 小白童鞋；你的支持是我最大的快乐！！
  50. </canvas>
  51. </body>
  52. </html>

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

  1.         var x = 100;
  2.         var y = 100;
  3.         var width = 50;
  4.         var height = 50;
  5.  
  6. 然后我们用函数context.translate把画布原点平移到红色正方形的中心点。
    这个函数可以将画布原点移到（x,y）处。这里将原点X坐标值设为红色正方形的左上角的X值（100）
    加上其一半的宽度。使用前面创建的变量即可控制这个红色正方形的属性
  7.  
  8. X+0.5*width
    然后Y坐标
    然后执行平移函数
    然后旋转

实现canvas以图片中心旋转

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

新建html页

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

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

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

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

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

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

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

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

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
  6.     <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7.     <meta name="renderer" content="webkit">
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.     <title></title>
  10.     <style type="text/css">
  11.     canvas{
  12.         position: absolute;
  13.         border: 1px solid;
  14.     }
  15.     </style>
  16. </head>
  17. <body>
  18.     <canvas id="canvas1" width="800" height="800"></canvas>
  19.     <script type="text/javascript">
  20.         var ctx1=canvas1.getContext('2d');
  21.         var obj={
  22.             x:100,
  23.             y:200,
  24.             width:200,
  25.             height:400
  26.         };
  27.         /**
  28.          * 画一个简单的长方形，让它每100毫秒旋转1度
  29.          */
  30.         //  浏览器中打开页面会发现，旋转是以画布的左上角为圆心的
  31.         function rotate(){
  32.             ctx1.clearRect(0,0,800,800);
  33.             ctx1.fillStyle='blue';
  34.             ctx1.rotate(Math.PI/180);
  35.             ctx1.strokeRect(obj.x,obj.y,obj.width,obj.height);
  36.             ctx1.fillRect(obj.x,obj.y,obj.width,obj.height);
  37.         }
  38.         // 在旋转之前，把画布的中心位置translate到图片的中心
  39.         function rotate2(){
  40.             ctx1.clearRect(0,0,800,800);
  41.             ctx1.fillStyle='blue';
  42.             ctx1.translate((obj.x+(obj.width/2)),(obj.y+(obj.height/2)));
  43.             ctx1.rotate(Math.PI/180);
  44.             ctx1.translate(-(obj.x+(obj.width/2)),-(obj.y+(obj.height/2)));
  45.             ctx1.strokeRect(obj.x,obj.y,obj.width,obj.height);
  46.             ctx1.fillRect(obj.x,obj.y,obj.width,obj.height);
  47.         }
  48.         // setInterval(rotate,100);
  49.         setInterval(rotate2,100);
  50.     </script>
  51. </body>
  52. </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. OpenResty+lua+GraphicsMagick生成缩略图

    1.安装GraphicsMagick 下载地址:http://sourceforge.net/projects/graphicsmagick/files/graphicsmagick/1.3.19/G ...

  2. yum安装高版本mysql(5.5)

    1.导入第三方源webtatic rpm -Uvh http://repo.webtatic.com/yum/centos/5/latest.rpm 2.如果已安装低版本的mysql就删除 yum r ...

  3. Flex弹性布局在移动设备上的应用

    引文 首先,我们有表格布局.当不考虑语义并且利用一些适当的嵌套和其他技巧,我们可以用table建立具有一定功能的布局. 然后是现在大多数人都在使用的浮动布局.我们可以使用任何我们想用的元素,但浮动并不 ...

  4. 【Oracle】如何导库

    正常倒库: 步骤一:在需要导入的库里建立一个新的数据库用户 create user sms533 identified by sms533; grant dba,create session to s ...

  5. 设置 tableview 的背景颜色,总是不生效

    1.只设置了背景图片,却忘记了取消掉 cell 的背景颜色(可以通过层次结构来观察) UIImageView *bgView = [[UIImageView alloc]initWithFrame:s ...

  6. bug:无法给图片加边框

    一,经历 1.错误代码 _avatarView.layer.cornerRadius = GIFT_AVATAR_WIDTH * 0.5; _avatarView.layer.borderColor ...

  7. ffplay 播放yuv

    ffplay -f rawvideo -video_size 1920x1080 a.yuv ffplay -i raw_out2.yuv -pix_fmt yuv422p -s 1280x720

  8. e.Handled的理解

    private void textBox1_KeyPress(object sender, System.Windows.Forms.KeyPressEventArgs e)         {    ...

  9. text-indent:-9999px 字体隐藏问题

    为什么要字体隐藏? 通常为了传达更好的视觉效果,我们常用图片替代掉字体.但是为了html语义化,常常要给内容模块加上一些标题来让页面更有意义,在抛开css裸奔的情况下也能很顺利的汲取到页面信息.为此我 ...

  10. sql 将字符串转换为表

    我们常常碰到需要将用户输入之字符串依特定的分隔符转换为表的一个栏位,下面是我写的一个sql函数.如能灵活运用则用途广泛. -- ==================================== ...