如何旋转此形状?

时间:2010-12-18 03:34:19

标签: javascript animation canvas rotation

我刚刚开始使用画布。我做了这个:

http://www.kingoslo.com/instruments/

转速计的箭头是使用画布绘制的。现在我试图制作一个动画,围绕转速计的输入(而不是自身)旋转它。这是我到目前为止所写的:

 <script type="text/javascript">
  var img = new Image(); 

  function init(){  
   img.src = 'background.png'; 
   setTimeout(draw,4000);   
  }  

  function draw() {  
   var ctx = document.getElementById('canvas').getContext('2d');   
   img.onload = function(){  
    ctx.drawImage(img,0,0); 
    ctx.beginPath();
    ctx.moveTo(247,308);
    ctx.bezierCurveTo(51, 408, 51, 410, 51, 411);
    ctx.bezierCurveTo(53, 413, 52, 412, 249, 313);
    ctx.fillStyle = "red";
    ctx.fill();
   }  
  }
 </script>

我不知道如何进一步发展。此外,是否有涵盖这些内容的全面文档?

感谢。

亲切的问候,
的Marius

1 个答案:

答案 0 :(得分:12)

你见过这个https://github.com/vjt/canvas-speedometer

吗?

我写了你的代码:

确保仪表的center point必须位于the center of your image,否则无效。

您可以处理 i 的值,以便以米为单位旋转图钉。

在这里,我拍了两张照片

  1. mt.png //用于背景仪表 http://i.stack.imgur.com/qbWeO.png
  2. pin3.png //表针 http://i.stack.imgur.com/SQEv6.png
  3. <强> CODE:

    <script type="text/javascript">
                function startup() {
                        var canvas = document.getElementById('canvas');
                        var context = canvas.getContext('2d');
                        var meter = new Image();
                        meter.src = 'Mt.png';    //meter background image
                        var pin = new Image();
                        pin.src = 'pin3.png';    //meter pin image                 
    
                        var x=meter.width/2;     // center point.X (must be the center of image)
                        var y=meter.height/2;    // center point.Y 
                        var width = meter.width; 
                        var height = meter.height;
    
                        var i=120;             // angle of rotation in degrees
                        var min =-115;         // maximum angle = 6 RPM in meter 
                        var max =100;          // minimum angle = 0 RPM in meter 
    
                        i=(i < min)? min:(i > max)? max:i;  //to check i must be within min & max range
                        var angleInRadians = Math.PI * i/180;  //converting degree to radians
                        meter.onload = function()
                        {
                            context.translate(x,y);    //setting center at x,y                        
                            context.drawImage(meter, -width / 2, -height / 2, width, height);  //drawing meter background 
                            context.rotate(angleInRadians); //rotating by angle
                            context.drawImage(pin, 0-pin.width/2,0-pin.height+pin.width/2,pin.width,pin.height);  //adjusting pin center at meter center
    
                        }
                }
        </script>
    

    <强>更新 如果您想处理值 rpm 的仪表 取代

                        var i=120;             // angle of rotation in degrees
                        var min =-115;         // maximum angle = 6 RPM in meter 
                        var max =100;          // minimum angle = 0 RPM in meter 
    

                        var r=1.7;               //handle here
                        var min =-114;           
                        var max =99;                                  
                        var span = (max-min)/6;  // dividing rotation angle by meter scale
                        var i=r*span+min;        //angle of rotation from value of r and span
    

    输出:
     alt text