25 lines
600 B
JavaScript
25 lines
600 B
JavaScript
export default function transform(ctx) {
|
|
// case 1
|
|
ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
|
|
ctx.setTransform(1,1,0,1,0,0);
|
|
ctx.fillRect(0,0,100,100);
|
|
ctx.resetTransform();
|
|
|
|
// case 2
|
|
ctx.fillStyle = "red";
|
|
ctx.fillRect(0, 0, 50, 50);
|
|
ctx.resetTransform();
|
|
|
|
// case 3
|
|
ctx.fillStyle = "rgba(0, 0, 255, 0.5)";
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, 0);
|
|
ctx.lineTo(100, 0)
|
|
ctx.transform(2, 0, 0, 2, 0, 0)
|
|
ctx.lineTo(100, 100)
|
|
ctx.transform(2, 0, 0, 1, 0, 0)
|
|
ctx.lineTo(100, 100)
|
|
ctx.closePath()
|
|
ctx.fill()
|
|
ctx.resetTransform();
|
|
} |