详解JavaScript中Canvas的高级绘图和动画技术

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);

ctx.strokeStyle = 'blue';
ctx.lineWidth = 2;
ctx.strokeRect(150, 10, 100, 100);

ctx.beginPath();
ctx.arc(300, 60, 50, 0, Math.PI * 2);
ctx.fillStyle = 'green';
ctx.fill();

ctx.translate(50, 50); // 平移
ctx.rotate(Math.PI / 4); // 旋转 45 度
ctx.scale(2, 2); // 放大两倍
ctx.transform(1, 0.5, 0, 1, 0, 0); // 自定义变换矩阵

ctx.globalCompositeOperation = 'source-over'; // 默认模式
ctx.globalCompositeOperation = 'destination-out'; // 橡皮擦效果
ctx.globalCompositeOperation = 'lighter'; // 颜色叠加

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;

for (let i = 0; i < data.length; i += 4) {
  // 修改像素数据
  data[i] = 255 - data[i]; // 反色效果
}

ctx.putImageData(imageData, 0, 0); // 更新 Canvas

function animate() {
  // 执行绘制操作
  requestAnimationFrame(animate); // 循环调用
}
animate();

const offscreenCanvas = document.createElement('canvas');
const offscreenCtx = offscreenCanvas.getContext('2d');

// 在 offscreenCtx 中绘制图像

// 将 offscreenCanvas 渲染到主 Canvas
ctx.drawImage(offscreenCanvas, 0, 0);

// 创建 Canvas 元素和上下文
const canvas = document.getElementById('particleCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 创建粒子对象
class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = Math.random() * 5 + 1;
    this.speedX = Math.random() * 3 - 1.5;
    this.speedY = Math.random() * 3 - 1.5;
  }

  update() {
    this.x += this.speedX;
    this.y += this.speedY;

    if (this.size > 0.2) this.size -= 0.1;
  }

  draw() {
    ctx.fillStyle = 'purple';
    ctx.strokeStyle = 'pink';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
  }
}

// 创建粒子数组
const particles = [];

function init() {
  for (let i = 0; i < 100; i++) {
    const x = Math.random() * canvas.width;
    const y = Math.random() * canvas.height;
    particles.push(new Particle(x, y));
  }
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < particles.length; i++) {
    particles[i].update();
    particles[i].draw();
  }
  requestAnimationFrame(animate);
}

init();
animate();