독특한 혁신: 캔버스 프레임워크의 잠재력을 탐구하고 독특한 페인팅 스타일을 실현합니다.

// 获取canvas元素
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 设置线条起始点和终止点
var startX = 50;
var startY = 50;
var endX = 250;
var endY = 250;

// 定义步长和计数器
var step = 1;
var counter = 0;

// 绘制线条动画
function drawLine() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 计算当前点的位置
  var currentX = startX + (endX - startX) * counter / 100;
  var currentY = startY + (endY - startY) * counter / 100;

  // 绘制线条
  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.lineTo(currentX, currentY);
  ctx.stroke();

  // 更新计数器
  counter += step;

  // 循环动画
  if (counter <= 100) {
    requestAnimationFrame(drawLine);
  }
}

// 调用绘制线条动画函数
drawLine();

// 获取canvas元素
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 定义图形初始状态
var xPos = 100;
var yPos = 100;
var width = 100;
var height = 100;
var rotation = 0;

// 绘制图形转换动画
function drawShape() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 更新图形状态
  xPos += 1;
  yPos += 1;
  width -= 2;
  height -= 2;
  rotation += Math.PI / 180;

  // 绘制图形
  ctx.save();
  ctx.translate(xPos, yPos);
  ctx.rotate(rotation);
  ctx.fillRect(-width / 2, -height / 2, width, height);
  ctx.restore();

  // 循环动画
  if (width > 0 && height > 0) {
    requestAnimationFrame(drawShape);
  }
}

// 调用绘制图形转换动画函数
drawShape();