Учебник по экземпляру HTML5: Canvas Tag реализует матрицу преобразование

Введение статьи Wulin.com (www.vevb.com): применение тегов Canvas для ежедневной практики HTML5 - Matrix Transformation.

До сих пор мы выучили технологию преобразования графиков, реализованную с использованием координат преобразования. Когда преобразование координат не может удовлетворить наши потребности, мы можем использовать технологию преобразования матрицы. Далее мы представим более сложные методы преобразования и деформации матрицы.

Матрица используется специально для достижения графической деформации. Он используется вместе с координатами для достижения цели деформации. Когда создается графический контекст, фактически создается матрица преобразования по умолчанию. Если эта матрица не модифицирована, нарисованная фигура нарисует фигуру верхним левым углом холста в качестве координатного происхождения. Нарисованная фигура не будет масштабирована и деформирована. Однако, если эта матрица преобразования будет изменена, ситуация будет другой.

Метод преобразования

context.transform (a, b, c, d, x, y);

Этот метод имеет 6 параметров, среди которых четыре параметра A, B, C и D используются в основном для деформирования рисунка; x и y представляют движущиеся координатные точки.

Три метода, упомянутые в предыдущем разделе с использованием преобразования координат для деформации графика:

перевести (x, y);

масштаб (x, y);

повернуть (угол);

Все они могут быть заменены методом преобразования и шестью параметрами в контексте. следующие:

перевести (x, y);

масштаб (A, D);

Поверните (B, C); // Этот метод фактически имеет только один параметр. Чтобы облегчить понимание и соответствовать преобразованию, используются остальные 2 параметра. Я поместил его здесь, чтобы сказать вам, что эти два параметра похожи по функции и связаны с вращением.

Кодовой случай