创建复杂JavaScript形状的有效方法

<canvas id="myCanvas" width="500" height="500"></canvas>

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

ctx.fillStyle = "red"; // 设置填充颜色
ctx.fillRect(x, y, width, height); // 绘制实心矩形
ctx.strokeRect(x, y, width, height); // 绘制边框矩形

ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
ctx.fillStyle = "blue"; // 设置填充颜色
ctx.fill(); // 填充圆形
ctx.strokeStyle = "black"; // 设置边框颜色
ctx.stroke(); // 绘制圆形边框

ctx.beginPath();
ctx.moveTo(x1, y1); // 移动到起始点
ctx.lineTo(x2, y2); // 绘制直线到指定点
ctx.lineTo(x3, y3);
ctx.closePath(); // 封闭路径
ctx.fillStyle = "green"; // 设置填充颜色
ctx.fill(); // 填充路径
ctx.strokeStyle = "black"; // 设置边框颜色
ctx.stroke(); // 绘制路径边框

function animate() {
  // 更新形状的位置或属性
  // 清除Canvas
  // 绘制形状
}

setInterval(animate, 10); // 每10毫秒更新一次形状