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

这是一个艰难的…

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

var arr = [

{ angle: 0, h: 50 },

{ angle: 90, h: 60 },

{ angle: 180, h: 70 },

{ angle: 270, h: 80 },

{ angle: 180, 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, pos.y);

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

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

}

ctx.stroke();

}

}