用html让一条直线旋转,html5 – 使用HTML画布绘制一系列旋转的线条

这是一个艰难的…

例如角度和物体的阵列.长度：

var arr = [

{ angle: 0,h: 50 },{ angle: 90,h: 60 },{ angle: 180,h: 70 },{ angle: 270,h: 80 },h: 90 }

];

以下绘制方法将绘制前一个数组中的行,

function getAngle(ctx,x,y,angle,h) {

var radians = angle * (Math.PI / 180);

return { x: x + h * Math.cos(radians),y: y + h * Math.sin(radians) };

}

function draw() {

var canvas = document.getElementById('canvas');

if (canvas.getContext) {

var ctx = canvas.getContext('2d');

ctx.beginPath();

var pos = { x: 400,y: 400 };

for (var i = 0; i < arr.length; i++) {

ctx.moveTo(pos.x,pos.y);

pos = getAngle(ctx,pos.x,pos.y,arr[i].angle,arr[i].h);

ctx.lineTo(pos.x,pos.y);

}

ctx.stroke();

}

}

你可以在canvas元素之后调用draw

draw();

编辑：

尝试将绘图功能更改为此,

function draw() {

var canvas = document.getElementById('canvas');

if (canvas.getContext) {

var ctx = canvas.getContext('2d');

ctx.beginPath();

var pos = { x: 400,y: 400 },angle = 0;

for (var i = 0; i < arr.length; i++) {

angle += arr[i].angle;

angle = (arr[i].angle + angle) % 360;

ctx.moveTo(pos.x,arr[i].angle + angle,pos.y);

}

ctx.stroke();

}

}