Fatal编程技术网
  • javascript/
  • Javascript 画布是否从底部中心图像角度旋转？

Javascript 画布是否从底部中心图像角度旋转？

javascript html canvas

Javascript 画布是否从底部中心图像角度旋转？,javascript,html,canvas,rotation,Javascript,Html,Canvas,Rotation,如何使用画布html5元素从底部中心角度旋转图像 <html> <head> <title>test</title> <script type="text/javascript"> function startup() { var canvas = document.getElementById('canvas');

如何使用画布html5元素从底部中心角度旋转图像

<html>
    <head>
        <title>test</title>
        <script type="text/javascript">
            function startup() {
                var canvas = document.getElementById('canvas');
                var ctx = canvas.getContext('2d');
                var img = new Image();
                img.src = 'player.gif';
                img.onload = function() {
                    ctx.translate(185, 185);
                    ctx.rotate(90 * Math.PI / 180);
                    ctx.drawImage(img, 0, 0, 64, 120);
                }
            }
        </script>
    </head>
    <body onload='startup();'>
        <canvas id="canvas" style="position: absolute; left: 300px; top: 300px;" width="800" height="800"></canvas>
    </body>
</html>


测试
函数启动（）{
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var img=新图像（）；
img.src='player.gif'；
img.onload=函数（）{
翻译（185185）；
ctx.旋转（90*Math.PI/180）；
ctx.drawImage（img，0,0,64,120）；
}
}
不幸的是，这似乎使它从图像的左上角旋转。有什么想法吗

编辑：最后，物体（太空船）必须像时钟指针一样旋转，就像它在向右/向左旋转一样。

首先，你必须平移到你想旋转的点。在这种情况下，图像尺寸为64 x 120。要围绕要平移到32220的底部中心旋转

ctx.translate(32, 120);
这会将您带到图像的底部中心。然后旋转画布：

ctx.rotate(90 * Math.PI/180);
旋转90度

然后，在绘制图像时，请尝试以下操作：

ctx.drawImage(img, -32, -120, 64, 120);
?？这行得通吗？

正确答案当然是文森特的答案。
我在旋转/平移这件事上做了点手脚，我想我的小实验会很有趣：

<html>
  <head>
    <title>test</title>
    <script type="text/javascript">
    canvasW = canvasH = 800;
    imgW = imgH = 128;
    function startup() {
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      // Just to see what I do...
      ctx.strokeRect(0, 0, canvasW, canvasH);
      var img = new Image();
      img.src = 'player.png';
      img.onload = function() {
        // Just for reference
        ctx.drawImage(img, 0, 0, 128, 128);
        ctx.drawImage(img, canvasW/2 - imgW/2, canvasH/2 - imgH/2, 128, 128);
        mark(ctx, "red");
        // Keep current context (transformations)
        ctx.save();
        // Put bottom center at origin
        ctx.translate(imgW/2, imgH);
        // Rotate
        // Beware the next translations/positions are done along the rotated axis
        ctx.rotate(45 * Math.PI / 180);
        // Mark new origin
        mark(ctx, "red");
        // Restore position
        ctx.translate(-imgW/2, -imgH);
        ctx.drawImage(img, 0, 0, imgW, imgH);
        mark(ctx, "green");
        // Draw it an wanted position
        ctx.drawImage(img, canvasW/2, canvasH/3, imgW, imgH);
        // Move elsewhere:
        ctx.translate(canvasW/2, canvasH/2);
        ctx.drawImage(img, 0, 0, imgW, imgH);
        mark(ctx, "blue");
        ctx.restore();
      }
    }
    function mark(ctx, color) {
     ctx.save();
//~      ctx.fillStyle = color;
//~      ctx.fillRect(-2, -2, 4, 4);
     ctx.strokeStyle = color;
     ctx.strokeRect(0, 0, imgW, imgH);
     ctx.restore();
    }
    </script>
  </head>
  <body onload='startup();'>
    <canvas id="canvas" style="position: absolute; left: 300px; top: 300px;" width="800" height="800"></canvas>
  </body>
</html>


测试
canvasW=canvasH=800；
imgW=imgH=128；
函数启动（）{
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
//只是想看看我在做什么。。。
ctx.strokeRect（0，0，canvasW，canvasH）；
var img=新图像（）；
img.src='player.png'；
img.onload=函数（）{
//仅供参考
ctx.drawImage（img，0，0，128，128）；
ctx.drawImage（img，canvasW/2-imgW/2，canvasH/2-imgH/2128128）；
标记（ctx，“红色”）；
//保持当前上下文（转换）
ctx.save（）；
//将底部中心置于原点
ctx.翻译（imgW/2，imgH）；
//轮换
//注意，下一个平移/位置是沿着旋转轴进行的
ctx.旋转（45*Math.PI/180）；
//标新立异
标记（ctx，“红色”）；
//恢复位置
ctx.翻译（-imgW/2，-imgH）；
ctx.drawImage（img，0，0，imgW，imgH）；
标记（ctx，“绿色”）；
//把它画成通缉犯的位置
ctx.drawImage（img、canvasW/2、canvasH/3、imgW、imgH）；
//迁往别处：
ctx.翻译（canvasW/2，canvasH/2）；
ctx.drawImage（img，0，0，imgW，imgH）；
标记（ctx，“蓝色”）；
ctx.restore（）；
}
}
功能标记（ctx，彩色）{
ctx.save（）；
//~ctx.fillStyle=颜色；
//~ctx.fillRect（-2，-2,4,4）；
ctx.strokeStyle=颜色；
ctx.strokeRect（0，0，imgW，imgH）；
ctx.restore（）；
}
我遇到的问题是，定位旋转的图形很困难，因为它是沿着旋转轴的：要么我们必须做一些三角数学来在原始原点绘制，要么我们必须在二次隐藏画布上绘制，然后在目标画布上绘制。
除非别人有更好的主意？



<html>
  <head>
    <title>Canvas Pinball flippers by stirfry</title>
    <script type="application/x-javascript">
     /*THIS SCRIPT ADAPTED BY STIRFRY. SOURCE TEETHGRINDER no warranty or liability implied or otherwise. use at your own risk. No credit required. Enjoy.stirfry.thank(you)*/
    var img = new Image();
                            //img.src = "flipper.gif";//right
    img.src="http://i39.tinypic.com/k1vq0x.gif"
    var img2 = new Image();
                             //img2.src = "flipper2.gif";//left
    img2.src ="http://i42.tinypic.com/14c8wht.gif"
    var gAngle = 0;
    gAngle = 60;
    stop = false;
    inertia = .8;
    vel = 10;
    k = 0.1;

    function drawagain(){
      gAngle = 60;
      stop = false;
      inertia = .8;
      vel = 10;
      k = 0.1;
     draw()
   }

   function draw(){
     var ctx = document.getElementById('canvas').getContext('2d');
     ctx.save();

        vel = ( vel * inertia ) + ( -gAngle * k );

        gAngle += vel;

        ctx.fillStyle = 'rgb(255,255,255)';
        ctx.fillRect (0, 0, 600, 600);

        ctx.translate(380, 480);              //location of the system
        ctx.rotate( gAngle * Math.PI / 180 );//rotate first then draw the flipper
        ctx.drawImage(img, -105, -16); 
ctx.restore();
ctx.save();
        ctx.translate(120, 480);              //location of the system
        ctx.rotate( -1*gAngle * Math.PI / 180 );//rotate first then draw the flipper
        ctx.drawImage(img2, -18, -16); 

ctx.restore();

        if( !stop )
          setTimeout(draw, 30);
      }

    </script>
    <style type="text/css">
      body { margin: 20px; font-family: arial,verdana,helvetica; background: #fff;}
      h1 { font-size: 140%; font-weight:normal; color: #036; border-bottom: 1px solid #ccc; }
      canvas { border: 2px solid #000; float: left; margin-right: 20px; margin-bottom: 20px; }
      pre { float:left; display:block; background: rgb(238,238,238); border: 1px dashed #666; padding: 15px 20px; margin: 0 0 10px 0; }
      .gameLayer {position: absolute; top: 0px; left: 0px;}
      #scoreLayer {font-family: arial; color: #FF0000; left: 10px; font-size: 70%; }
      #windowcontainer {position:relative; height:300px;}
    </style>
  </head>

  <body onload="draw()">
    <div id="windowcontainer">
      <canvas id="canvas" width="500" height="500"></canvas>
      <INPUT VALUE="flip" TYPE=BUTTON onClick="drawagain();"><br/>
    </div>

  </body>
</html>


stirfry帆布弹球鞋
/*这个剧本由斯蒂弗里改编。SOURCE TEETHGRINDER无任何暗示或其他担保或责任。使用风险自负。不需要学分。祝你玩得愉快。斯蒂弗里。谢谢（你）*/
var img=新图像（）；
//img.src=“flipper.gif”//正确的
img.src=”http://i39.tinypic.com/k1vq0x.gif"
var img2=新图像（）；
//img2.src=“flipper2.gif”//左边
img2.src=”http://i42.tinypic.com/14c8wht.gif"
var-gAngle=0；
恒河=60；
停止=错误；
惯性=.8；
vel=10；
k=0.1；
函数{
恒河=60；
停止=错误；
惯性=.8；
vel=10；
k=0.1；
画（）
}
函数绘图（）{
var ctx=document.getElementById（'canvas'）.getContext（'2d'）；
ctx.save（）；
vel=（vel*惯性）+（-gAngle*k）；
恒河+=水平；
ctx.fillStyle='rgb（255255）'；
ctx.fillRect（0,060600）；
translate（380480）；//系统的位置
ctx.rotate（gAngle*Math.PI/180）；//首先旋转，然后绘制鳍状肢
ctx.drawImage（img，-105，-16）；
ctx.restore（）；
ctx.save（）；
translate（120480）；//系统的位置
ctx.rotate（-1*gAngle*Math.PI/180）；//首先旋转，然后绘制鳍状肢
ctx.drawImage（img2，-18，-16）；
ctx.restore（）；
如果（！停止）
设置超时（绘图，30）；
}
正文{margin:20px；字体系列：arial、verdana、helvetica；背景：#fff；}
h1{字体大小：140%；字体大小：普通；颜色：#036；边框底部：1px实心#ccc；}
画布{border:2px solid#000；float:left；margin right:20px；margin bottom:20px；}
前置{浮点：左；显示：块；背景：rgb（238）；边框：1px虚线#666；填充：15px 20px；边距：0 10px 0；}
.gameLayer{位置：绝对；顶部：0px；左侧：0px；}
#scoreLayer{字体系列：arial；颜色：#FF0000；左：10px；字体大小：70%；}
#windowcontainer{位置：相对；高度：300px；}
当我需要旋转从指定点（中心）开始的文本时，我使用过这个选项吗

真令人惊讶：再次感谢。我想我现在已经掌握了窍门。更新：不过有一个问题，我认为左边的宽度太大了，所以被切断了。有没有办法解决这个问题，但仍然有这么大的角度？看起来我通过设置ctx.translate（232，120）；-将您的答案设置为已接受答案：）@Vincent请您调查一下。谢谢：）它将为您添加强大的跨浏览器支持，这不是一回事 
ctx.save(); 
ctx.translate(x,y);
ctx.rotate(degree*Math.PI/180);
ctx.translate(-x,-y);   
ctx.fillText(text,x,y); 
ctx.stroke();   
ctx.restore();