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();
}
现在可以在每次使用新角度生成的线上移动图像。请帮忙。拍摄汽车或其他任何形象。
答案 0 :(得分:0)
是的,确实如此。您已经可以使用简单的三角函数计算出绘制图像的位置。您需要做的是研究如何将任意旋转的图像绘制到画布上。
这是一个向画布绘制可变长度和角度线的快速示例。添加到你绘制旋转图像的研究结果,你就完成了。
<!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>