26 lines
712 B
HTML
26 lines
712 B
HTML
<style>
|
|
canvas {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
</style>
|
|
<body>
|
|
<canvas id="canvas1"></canvas>
|
|
<canvas id="canvas2"></canvas>
|
|
<script>
|
|
function drawRectWithSetTransform(id, transform) {
|
|
const canvas = document.getElementById(id);
|
|
canvas.width = canvas.clientWidth;
|
|
canvas.height = canvas.clientHeight;
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.fillStyle = 'green';
|
|
ctx.setTransform(transform);
|
|
ctx.fillRect(0, 0, 50, 50);
|
|
}
|
|
|
|
drawRectWithSetTransform('canvas1', { a: 2, d: 2 });
|
|
drawRectWithSetTransform('canvas2', { m11: 2, m22: 2 });
|
|
</script>
|
|
</body>
|