矩阵入门教程及文件获取地址

http://www.seeshiontech.com/d...

1.首先咱们创立canvas标签,为了不便查看成果,咱们为canvas增加一下款式,这里图片我应用的是1920*1080的尺寸

 <canvas id="canvas" width="1920" height="1080"></canvas>
 canvas {            display: block;            border: 1px solid;            width: 480px;            height: 270px;            margin: 100px auto;        }
 //不做解决 将图片绘制到画布 let image = document.createElement("img");        let context = canvas.getContext("2d");        image.src = "http://static.atvideo.cc/veleap/templateDemo/2021/04/06/16/30aawseyhgae.png";        image.onload = function () {            context.drawImage(                image,                0,                0,            );        }

2.引入Affine.js 文件

<script src="./lib/Affine.js"></script>

3.应用矩阵中心点旋转缩放

 let image = document.createElement("img");        let context = canvas.getContext("2d");        image.src = "http://static.atvideo.cc/veleap/templateDemo/2021/04/06/16/30aawseyhgae.png";        image.onload = function () {            const imageWidth = image.width,                imageHeight = image.height,                centerPointX = imageWidth / 2,                centerPointY = imageHeight / 2;            let a = {                x: centerPointX,                y: centerPointY,            },                p = {                    x: centerPointX,                    y: centerPointY,                },                s = {                    x: 0.5,                    y: 0.5,                },                r = 45;            let matrix = new Affine();            matrix.set(a, p, s, r);            context.setTransform(matrix.mA, matrix.mB, matrix.mC, matrix.mD, matrix.mE, matrix.mF);            context.drawImage(                image,                0,                0,            );        }

本文由博客一文多发平台 OpenWrite 公布！