Введение статьи Wulin.com (www.vevb.com): применение тегов Canvas для ежедневной практики HTML5 - Matrix Transformation.
До сих пор мы выучили технологию преобразования графиков, реализованную с использованием координат преобразования. Когда преобразование координат не может удовлетворить наши потребности, мы можем использовать технологию преобразования матрицы. Далее мы представим более сложные методы преобразования и деформации матрицы.Матрица используется специально для достижения графической деформации. Он используется вместе с координатами для достижения цели деформации. Когда создается графический контекст, фактически создается матрица преобразования по умолчанию. Если эта матрица не модифицирована, нарисованная фигура нарисует фигуру верхним левым углом холста в качестве координатного происхождения. Нарисованная фигура не будет масштабирована и деформирована. Однако, если эта матрица преобразования будет изменена, ситуация будет другой.
Метод преобразования
Три метода, упомянутые в предыдущем разделе с использованием преобразования координат для деформации графика:
перевести (x, y);
масштаб (x, y);
повернуть (угол);
Все они могут быть заменены методом преобразования и шестью параметрами в контексте. следующие:
перевести (x, y);
масштаб (A, D);
Поверните (B, C); // Этот метод фактически имеет только один параметр. Чтобы облегчить понимание и соответствовать преобразованию, используются остальные 2 параметра. Я поместил его здесь, чтобы сказать вам, что эти два параметра похожи по функции и связаны с вращением.
Кодовой случай