在由角度生成的线上移动图像

Question

大家好，我是从用户那里输入一个角度输入，并使用它在该方向上画线

       function makeline(angle)
       {
       context.clearRect(0, 0, theCanvas.width, theCanvas.height);

          angle=document.getElementById("radi").value;
           //alert(angle);
          angle=(Math.PI/180)*angle;
         //getting end coordinates

           x2= 0+theCanvas.width*Math.cos(angle) //here angle should be in radians
           y2=400+theCanvas.width *Math.sin(angle);

           context.beginPath();
           context.setLineDash([3,2]);
           context.lineWidth=10;
           context.strokeStyle="black";
           context.moveTo(400,400);
           context.lineTo(x2,y2);
           context.stroke();
         }

现在可以在每次以新角度生成的线上移动图像。 请帮忙。 拍摄汽车或其他任何东西的图像。

Answer 1

是的。 您已经可以使用简单的三角函数计算出在何处绘制图像。 您需要做的是研究如何在画布上任意旋转绘制图像。

这是在画布上绘制长度和角度可变的直线的快速示例。 将研究结果添加到其中，绘制旋转图像即可完成。

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}

window.addEventListener('load', mInit, false);

function mInit()
{
    byId('angleSlider').addEventListener('change', onSliderChange, false);
    byId('lengthSlider').addEventListener('change', onSliderChange, false);
}

function onSliderChange(evt)
{
    var slider = this;
    var tgtSpan = slider.nextSibling;
    tgtSpan.innerHTML = slider.value;
    drawCurValues();
}

function drawCurValues()
{
    var angle = byId('angleSlider').value;
    var displacement = byId('lengthSlider').value;

    var originX = 128, originY = 128;   // center of 256x256 canvas
    var can = byId('outputCanvas');
    var ctx = can.getContext('2d');
    ctx.clearRect(0,0,can.width, can.height);

    var xOfs, yOfs;
    yOfs = displacement * Math.sin( angle * 3.141/180 );
    xOfs = displacement * Math.cos( angle * 3.141/180 );

    yOfs *= -1;     // since canvas 0,0 is at top-left, rather than bottom-left. 90 deg should be above origin, not below it
    ctx.beginPath();
    ctx.moveTo(originX,originY);
    ctx.lineTo( originX+xOfs, originY+yOfs );
    ctx.closePath();
    ctx.stroke();
}

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

</script>
<style>
canvas
{
    border: solid 1px black;
}
</style>
</head>
<body>
    Angle <input type='range' value='0' min='0' max='360' id='angleSlider'/><span id='angleDisplay'></span><br>
    Length <input type='range' value='0' min='0' max='181' id='lengthSlider'/><span id='lengthDisplay'></span><br> <!-- 181 = sqrt(2) * 128; i.e dist from center to corners of canvas -->
    <canvas width='256' height='256' id='outputCanvas'></canvas>
</body>
</html>

在由角度生成的线上移动图像

问题描述

1 个解决方案

解决方案1
0 2014-03-26 07:21:11

在由角度生成的线上移动图像

问题描述

1 个解决方案

解决方案1 0 2014-03-26 07:21:11

解决方案1
0 2014-03-26 07:21:11