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>
|