HTML and CSS Reference
In-Depth Information
context.save();
context.fillStyle = "#ff0000";
context.transform(1, 0, skewX, 1, dx, dy);
context.fillRect(-50, -50, 100, 100);
context.restore();
}());
The
skewX
variable is relative to the mouse's x position, and offset from the center of the canvas. The
value is multiplied by 0.01 to keep the skew in a manageable range; it is then fed to
context.transform
.
When you test this example, you can see the entire shape is skewed, as shown in Figure 18-2.
Figure 18-2.
Rectangle skewed on the x-axis
In the example
04-skew-xy.html
, we did the same thing on the y-axis:
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
var skewX = (mouse.x - canvas.width / 2) * 0.01,
skewY = (mouse.y - canvas.height / 2) * 0.01,
dx = canvas.width / 2,
dy = canvas.height / 2;
context.save();
context.fillStyle = "#ff0000";
context.transform(1, skewY, skewX, 1, dx, dy);
context.fillRect(-50, -50, 100, 100);
context.restore();
}());
Figure 18-3 shows you how skewing a shape on two axes looks.
Figure 18-3.
Rectangle skewed on both axes
It's amazing to be able to do this kind of effect so easily. Skewing is used often for pseudo-3D, and as you
move your mouse around in the previous example, you can see how it appears to have some
