Przekrzywienie w miejscu
Użyty został skrypt transform.js.
Mamy figurę, którą chcemy przekrzywić w osi X o współczynnik 0.4
Listing
var cv = document.getElementById("canvas1");
var ctx = cv.getContext("2d");
var leftX = 220;
var topY = 40;
var width = 75;
var height = 50;
var cornerRadius = 15;
drawRectangle(ctx);
Jeżeli chcemy saklować figurę względem środka ciężkości,
należy:
wykonać translację środka ciężkości do punktu
(0,0)
Listing
var cv = document.getElementById("canvas2");
var ctx = cv.getContext("2d");
var leftX = 220;
var topY = 40;
var width = 75;
var height = 50;
var cornerRadius = 15;
ctx.save();
ctx.translate(-(leftX+width/2), -(topY+height/2));
drawRectangle(ctx);
wykonać żądane przekrzywienie
Listing
var cv = document.getElementById("canvas3");
var ctx = cv.getContext("2d");
var leftX = 220;
var topY = 40;
var width = 75;
var height = 50;
var cornerRadius = 15;
ctx.transform(1,0,0.4,1,0,0);
ctx.translate(-(leftX+width/2), -(topY+height/2));
drawRectangle(ctx);
przesunąć figurę z powrotem (translacja zwrotna)
Listing
var cv = document.getElementById("canvas4");
var ctx = cv.getContext("2d");
var leftX = 220;
var topY = 40;
var width = 75;
var height = 50;
var cornerRadius = 15;
ctx.translate(leftX+width/2, topY+height/2);
ctx.transform(1,0,0.4,1,0,0);
ctx.translate(-(leftX+width/2), -(topY+height/2));
drawRectangle(ctx);