• 旋转（以中心点为例）

      1. ctx.save();
      2. ctx.translate(x, y);
      3. ctx.rotate(rotate * Math.PI / 180);
      4. ctx.translate(-x, -y);
      5. // 在此处绘制
      6. ctx.restore();

    • 渐变色（从上往下）

      1. let grad = ctx.createLinearGradient(0, 0, 0, screenHeight);
      2. grad.addColorStop(0, 'rgb(105, 230, 240)');
      3. grad.addColorStop(1, 'rgb(157, 226, 196)');
      4. // 绘制
      5. // ctx.fillStyle = grad;
      6. // ctx.fillRect();

    • 缩放（中心点）

      1. ctx.save();
      2. ctx.translate(centerX * (1 - scale), centerY * (1 - scale));
      3. ctx.scale(scale, scale);
      4. // 在此处绘制
      5. ctx.restore();

    • 文字描边

      1. ctx.lineWidth = 2; // 非必须
      2. ctx.strokeStyle = '#ffffff';
      3. ctx.strokeText('文字', x, y);
      4. ctx.fillStyle = '#f77a25';
      5. ctx.fillText('文字', x, y);
      6. // stroke fill顺序不同造成效果不同，谁后写，谁效果更大！