创建动态线条，两端都有圆圈，线条的宽度、高度和旋转参数- javascript

<canvas id="myCanvas"></canvas>

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

canvas.width = 500; // 设置Canvas宽度
canvas.height = 300; // 设置Canvas高度

var x1 = 100; // 线条起点的x坐标
var y1 = 150; // 线条起点的y坐标
var x2 = 400; // 线条终点的x坐标
var y2 = 150; // 线条终点的y坐标
var lineWidth = 5; // 线条的宽度
var lineHeight = 10; // 线条的高度
var rotation = 45; // 线条的旋转角度（单位：度）

// 绘制线条
context.beginPath();
context.lineWidth = lineWidth;
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();

// 绘制圆圈
context.beginPath();
context.arc(x1, y1, lineWidth / 2, 0, 2 * Math.PI); // 起点圆圈
context.fill();

context.beginPath();
context.arc(x2, y2, lineWidth / 2, 0, 2 * Math.PI); // 终点圆圈
context.fill();