是否有可能使透视图像变换在HTML5画布？ 我使用的EaselJS现在并不能找到我需要的解决方案。
Answer 1:
我没有尝试过的easel.js还，但每个图像变换与矩阵运算完成的：平移，旋转，倾斜等找上了easel.js源代码有一个Matrix2D类和文件，从而以： HTTP： //www.createjs.com/Docs/EaselJS/Matrix2D.html 。 对于透视变换你需要使用rotation ， scaling和skewing 。 您只需要使用值和试验是最适合您的需求发挥。
Answer 2:
为了实现透视变换，你需要一个选项，以在3D翻译对象，但据CreateJS / EaselJS采用2D转换矩阵，你不能做到这一点。
但是你可以实现类似的外观和感觉，如果你将与倾斜和规模在旅途中玩。
例如我发上的平坦性，这给到卡的立体图卡移动：
var aspectRatio = 1.777777777777778; var canvasHeight, canvasWidth, canvasTop, canvasLeft; var graphicsLoader; var stage, frameTick; var calculateSize = function() { if ((window.innerWidth / window.innerHeight) >= aspectRatio) { canvasHeight = window.innerHeight; canvasWidth = canvasHeight * aspectRatio; canvasTop = 0; canvasLeft = (window.innerWidth - canvasWidth) / 2; } else { canvasWidth = window.innerWidth; canvasHeight = canvasWidth / aspectRatio; canvasLeft = 0; canvasTop = (window.innerHeight - canvasHeight) / 2; } var gameCanvas = document.getElementById('exampleScene'); gameCanvas.style.width = canvasWidth + "px"; gameCanvas.style.height = canvasHeight + "px"; gameCanvas.style.top = canvasTop + "px"; gameCanvas.style.left = canvasLeft + "px"; }; //load graphics graphicsManifet = [ {id: "flatness", src: "https://i.imgur.com/6E1NKLa.png"}, {id: "card", src: "https://i.imgur.com/CXhpG1X.png"}, ]; graphicsLoader = new createjs.LoadQueue(true); graphicsLoader.loadManifest(graphicsManifet); graphicsLoader.on("complete", function() { initScene(); }, this); function initScene() { stage = new createjs.Stage("exampleScene"); createjs.Ticker.on("tick", frameTick); //draw var flatness = new createjs.Bitmap(graphicsLoader.getResult("flatness")); flatness.x = 200; var card = new createjs.Bitmap(graphicsLoader.getResult("card")); card.alpha = 0; stage.addChild( flatness, card ); var animationTime = intervalTime = 800; createjs.Tween.get() .wait(0) .call(function() { movePerspective(card, 280, 10, 0); card.alpha = 1; }) .wait(intervalTime) .call(function() { movePerspective(card, 1530, 10, animationTime); card.alpha = 1; }) .wait(intervalTime) .call(function() { movePerspective(card, 1570, 680, animationTime); card.alpha = 1; }) .wait(intervalTime) .call(function() { movePerspective(card, 230, 680, animationTime); card.alpha = 1; }) .wait(intervalTime) .call(function() { movePerspective(card, 280, 10, animationTime); card.alpha = 1; }).loop = true; }; function frameTick(e) { stage.update(e); } movePerspective = function(object, x, y, time) { typeof time != "number" ? time = 1000 : ""; var scales = { y: y, scaleX : 0.887073905 + y*0.000142045, // this numbers I calculated depending scaleY : 0.761221624 + y*0.000284091 // on perspective angle of flatness board }; var skAspect = 0.00673453853 - y * 0.000000654928977; var cardSkewX = (6.5991 - skAspect * x); var pointskew = { x: x, skewX: cardSkewX }; createjs.Tween.get(object).to({ x: pointskew.x, y: scales.y, skewX: pointskew.skewX, scaleX: scales.scaleX, scaleY: scales.scaleY }, time, createjs.Ease.getPowInOut(3)); }; window.onload = function() { window.addEventListener("resize", function() { calculateSize(); }); }; //set framerate createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED; createjs.Ticker.framerate = 60; $(function() { calculateSize(); }); #exampleScene { position: absolute; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> <canvas id="exampleScene" width="1920" height="1080"></canvas> 文章来源: EaselJS perspective image transformation
