Canvas 绘制变换和渐变，点亮你的图形艺术之路！

2023-03-23 21:53:01

在 Canvas 中让图形灵动起来：变换与渐变的艺术

在数字世界的画布上，Canvas 技术犹如一张神奇的魔法毯，让你可以尽情挥洒创意，让你的图形作品生动灵现。通过变换和渐变，你将拥有变幻莫测的力量，赋予图像活力、色彩和无限可能。

1. 绘制变换：图形的舞步

位移：自由穿梭

位移就好像你在画布上移动画笔，你可以将图像从一点轻松移动到另一点。调用 translate() 方法，即可操控图像的移动方向和距离，让其在画布上自由穿梭。

// 将图像向右移动 50 像素，向下移动 100 像素
ctx.translate(50, 100);

旋转：旋转飞舞

旋转就好像在旋转木马上旋转，你可以让图像围绕指定点旋转一定角度，为其注入动感和趣味。调用 rotate() 方法，即可操控图像的旋转角度，让其灵动飘逸。

// 将图像绕着中心点旋转 45 度
ctx.rotate(Math.PI / 4);

缩放：变大变小

缩放就像放大镜，你可以放大或缩小图像的大小，让其在画布上尽情绽放。调用 scale() 方法，即可操控图像的缩放比例，令其成为画布上的主角或背景。

// 将图像放大 2 倍
ctx.scale(2, 2);

形变：千变万化

形变就像魔术棒，你可以扭曲和变形图像的形状，创造出无穷无尽的视觉效果。调用 transform() 方法，即可操控图像的变形矩阵，让其呈现出令人惊叹的扭曲形态。

// 将图像沿 x 轴扭曲 0.5，沿 y 轴拉伸 2
ctx.transform(0.5, 0, 0, 2, 0, 0);

2. 渐变：赋予图形灵魂

渐变就像色彩的魔术师，能为你的图形作品带来丰富多彩的色调变化，增添艺术感和视觉冲击力。

线性渐变：如流水般流淌

线性渐变就像彩虹，在两个点之间平滑过渡颜色，形成如流水般的美妙色调。调用 createLinearGradient() 方法，即可轻松创建线性渐变对象，赋予图像流畅的色彩变化。

// 创建从红色到蓝色的线性渐变
var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');

径向渐变：如波纹般扩散

径向渐变就像涟漪，从一个中心点向四周扩散颜色，形成如波纹般的美妙色调。调用 createRadialGradient() 方法，即可轻松创建径向渐变对象，赋予图像扩散的色彩变化。

// 创建从白色到黑色的径向渐变
var gradient = ctx.createRadialGradient(100, 100, 0, 100, 100, 200);
gradient.addColorStop(0, 'white');
gradient.addColorStop(1, 'black');

组合渐变：如光影般交融

组合渐变就像艺术家的调色板，将多种渐变融合在一起，创造出独一无二的色彩效果。调用 addColorStop() 方法，即可轻松为渐变对象添加多个颜色停靠点，赋予图像复杂而美丽的色彩变化。

// 创建从红色到绿色再到蓝色的组合渐变
var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'green');
gradient.addColorStop(1, 'blue');