http://www.seeshiontech.com/docs/page_145.html
1.首先我们创建 canvas 标签,为了方便查看效果,我们为 canvas 添加一下样式,这里图片我使用的是 120*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, ); }